我正在使用Vue.js来修改我的DOM。我正在触发fetch_data()方法，该方法试图在成功完成 AJAX 调用后更新data.messages以读取“Love the Vue.JS”。AJAX 调用成功运行，它确实更新了此行中的data.message：
fetch_data()
data.messages
data.message
self.message = 'Love the Vue.JS'
我可以看到它的工作，因为它在控制台中打印。问题是DOM没有更新为新的data.message定义。我如何让它工作，并在数据更新时更新DOM？第一次
qlvxas9a1#
问题是当你调用jQuery时，你的this上下文丢失了。你的回调方法（success: function）没有返回到Vue的引用。传递正确上下文的方法是，足够方便的，在你的$.ajax调用中的context属性。jQuery站点上记录了所有这些内容：https://api.jquery.com/jQuery.ajax/-只需搜索“上下文”一词，您就会找到它。改进后 AJAX 调用应该如下所示：
this
success: function
$.ajax
context
$.ajax({ url: '/test_json', context: this, // [... etc ...] success: function(data) { this.message = "reference to Vue data message"; } );
jq6vz3qz2#
你可以把 AJAX 调用绑定到父组件Vue，在ajax成功语句的末尾加上bind（this），看起来像下面这样（我已经更新了，我意识到我有一个缺陷，现在它应该可以工作了）：
$.ajax({ url: '/test_json', // etc. //... etc. success: function(data) { this.message = "reference to Vue data message"; }bind(this), );
2条答案
按热度按时间qlvxas9a1#
问题是当你调用jQuery时，你的
this上下文丢失了。你的回调方法（success: function）没有返回到Vue的引用。传递正确上下文的方法是，足够方便的，在你的$.ajax调用中的context属性。jQuery站点上记录了所有这些内容：https://api.jquery.com/jQuery.ajax/-只需搜索“上下文”一词，您就会找到它。
改进后 AJAX 调用应该如下所示：
jq6vz3qz2#
你可以把 AJAX 调用绑定到父组件Vue，在ajax成功语句的末尾加上bind（this），看起来像下面这样（我已经更新了，我意识到我有一个缺陷，现在它应该可以工作了）：