Javascript 用AJAX初始化Vue数据
我试图用AJAX查询的Javascript 用AJAX初始化Vue数据,javascript,jquery,ajax,asp.net-mvc,vue.js,Javascript,Jquery,Ajax,Asp.net Mvc,Vue.js,我试图用AJAX查询的JsonResult中的数据填充Vue。当我从视图模型中对数据进行编码时，我的Vue可以很好地接收数据，但当我尝试使用AJAX检索数据时，Vue接收不到数据。我的代码是这样的： <script type="text/javascript"> var allItems;// = @Html.Raw(Json.Encode(Model)); $.ajax({ url: '@Url.Action("GetIt
JsonResult<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>
变量allItems；//=@Html.Raw（Json.Encode（Model））；
$.ajax({
url:'@url.Action（“GetItems”，“Settings”），
方法：“GET”，
成功：功能（数据）{
allItems=数据；
//警报（JSON.stringify（数据））；
},
错误：函数（错误）{
警报（JSON.stringify（错误））；
}
});
var ItemsVue=新的Vue({
el:“#项目列表”，
数据：{
项目：allItems
},
方法：{
},
就绪：函数（）{
}
});
项目
年
{{Item.DisplayName}
{{Item.Year}
这是与所有适当的包括。我知道
@Url.Action（“GetItems”，“Settings”）var allItems=@Html.Raw（Json.Encode（Model））
var ItemsVue=新的Vue({
el:“#项目列表”，
数据：{
项目：[]
},
挂载：函数（）{
var self=这个；
$.ajax({
url:“/items”，
方法：“GET”，
成功：功能（数据）{
self.items=JSON.parse（数据）；
},
错误：函数（错误）{
console.log（错误）；
}
});
}
});
项目
年
{{item.DisplayName}
{{item.Year}
created () {
this.initialize()
},
mounted () {
this.getData()
},
methods: {
getData() {
var getUser_url = url + 'cfc/sw.cfc?method=getUser&returnformat=json&queryformat=struct';
console.log(getUser_url )
/*
You can use a plethora of options for doing Ajax calls such as Axios, vue-resource or better yet the browser's built in fetch API in modern browsers.
You can also use jQuery via $.ajax() API, which simply wraps the XHR object in a simple to use method call
but it's not recommended to include the whole jQuery library for the sake of using one method.
http://updates.html5rocks.com/2015/03/introduction-to-fetch
The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses.
It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.
*/
// ********** must use self = this **************
// this reference vue-app. must pass it to self, then pass into callback function (success call back)
var self = this;
fetch(getUser_url).then(function (response) {
return response.json();
}).then(function (result) {
console.log(result);
// must use self.user, do not use this.user,
// because here, this's scope is just the function (result).
// we need this reference to vue-app,
self.user = result; // [{}, {}, {}]
}); // fetch(){}
console.log(this.user);
},
initialize () {}
您必须在收到数据后更新视图的数据项，所以您只能在
successsuccessItemsVue.$data.items=datasuccesssuccessself.data.items=data created () {
this.initialize()
},
mounted () {
this.getData()
},
methods: {
getData() {
var getUser_url = url + 'cfc/sw.cfc?method=getUser&returnformat=json&queryformat=struct';
console.log(getUser_url )
/*
You can use a plethora of options for doing Ajax calls such as Axios, vue-resource or better yet the browser's built in fetch API in modern browsers.
You can also use jQuery via $.ajax() API, which simply wraps the XHR object in a simple to use method call
but it's not recommended to include the whole jQuery library for the sake of using one method.
http://updates.html5rocks.com/2015/03/introduction-to-fetch
The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses.
It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.
*/
// ********** must use self = this **************
// this reference vue-app. must pass it to self, then pass into callback function (success call back)
var self = this;
fetch(getUser_url).then(function (response) {
return response.json();
}).then(function (result) {
console.log(result);
// must use self.user, do not use this.user,
// because here, this's scope is just the function (result).
// we need this reference to vue-app,
self.user = result; // [{}, {}, {}]
}); // fetch(){}
console.log(this.user);
},
initialize () {}