我正在尝试使用来自JsonResult
AJAX查询的数据填充Vue 。当我从View模型对数据进行编码时,Vue可以很好地接收数据,但是当我尝试使用AJAX检索数据时却不能。这是我的代码:
<script type="text/javascript">
var allItems;// = @Html.Raw(Json.Encode(Model));
$.ajax({
url: '@Url.Action("GetItems", "Settings")',
method: 'GET',
success: function (data) {
allItems = data;
//alert(JSON.stringify(data));
},
error: function (error) {
alert(JSON.stringify(error));
}
});
var ItemsVue = new Vue({
el: '#Itemlist',
data: {
Items: allItems
},
methods: {
},
ready: function () {
}
});
</script>
<div id="Itemlist">
<table class="table">
<tr>
<th>Item</th>
<th>Year</th>
<th></th>
</tr>
<tr v-repeat="Item: Items">
<td>{{Item.DisplayName}}</td>
<td>{{Item.Year}}</td>
<td></td>
</tr>
</table>
</div>
这是所有适当的包含项。我知道@Url.Action("GetItems", "Settings")
返回正确的URL,并且数据按预期返回(如成功功能中的警报所测试(请参阅AJAX中的成功功能中的注释)。按如下方式进行填充:var allItems = @Html.Raw(Json.Encode(Model));
可以工作,但AJAX查询不能。做错了什么?
通过在AJAX调用的成功处理程序中执行必要的操作,我能够解决问题。您可以在其中放置整个Vue对象创建,也可以只设置所需的数据。