使用AJAX初始化Vue数据
我正在尝试用来自AJAX查询的JsonResult的数据填充Vue。 当我从View Model中编码时，我的Vue接收数据就好了，但是当我尝试使用AJAX检索它时却没有。 这是我的代码的样子：
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 () { } }); Item Year {{Item.DisplayName}} {{Item.Year}}
这是所有适当的包括。 我知道@Url.Action("GetItems", "Settings")返回正确的URL并且数据按预期返回（由成功函数中的警报测试（请参阅AJAX中成功函数中的注释）。填充它就像所以： var allItems = @Html.Raw(Json.Encode(Model));工作，但AJAX查询没有。我做错了什么？
您可以在已安装的函数内部进行ajax调用（在Vuejs 1.x中为“ready”）。
Item Year {{item.DisplayName}} {{item.Year}}
我能够通过在AJAX调用的成功处理程序中执行必要的操作来解决我的问题。 您可以将整个Vue对象创建放在那里，也可以只设置所需的数据。
我有同样的问题，由Samuel De Backer的答案修正。
问题在于ajax成功回调函数，
如果你使用this.data，它是不正确的，因为当’this’引用vue-app时，你可以使用this.data，但是这里（ajax成功回调函数），这里没有引用vue-app，而是’this ‘引用任何调用此函数的任何人（ajax调用）。
所以你必须在ajax之前设置var self = this，然后传入回调函数（成功回调）
这是我的工作代码
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 () {}
还有另一种方式：
new Vue({ el:"#app", data:{ populateByAjax:{} }, beforeCompile: function() { this.getRequestByAjax(); }, methods:{ getRequestByAjax:function(){ var xhr = new XMLHttpRequest(); var args = "action=lol"; var self = this; xhr.open('POST', './endpoint', true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.onready = function (aEvt) { if(xhr.readyState == 4 && xhr.status==200) { self.populateByAjax = JSON.parse(xhr.responseText); console.log(self.populateByAjax); } } xhr.send(args); } }
不要忘记用以下内容完成* .php文件：
echo json_encode($result);
你需要更好地使用
$( "#Itemlist" ).load( yourUrl, function() { alert( "Load was performed." ); });
请在这里查看更多