在 VueJS 中更新 AJAX 数据后，DOM 不会更新

Question

我正在使用Vue.js来修改我的DOM。我正在触发fetch_data()方法，该方法在成功完成 AJAX 调用后尝试更新data.messages以读取"Love the Vue.JS"。

AJAX 调用工作成功，它确实更新了以下行中的data.message：

self.message = 'Love the Vue.JS'

我可以看到它可以工作，因为它在控制台中打印。问题是 DOM 没有使用data.message的新定义进行更新。如何使其工作并在数据更新时更新 DOM？

var app = new Vue({
delimiters: ['[[', ']]'],
el: '#app',
data: { message: 'Hello Vue.js!' },
methods: {
fetch_data: function() {
console.log('Running script for ajax...');
$("#retrieve_data_wait").text("Retrieving data. This will update when complete...");
$.ajax({
url: '/test_json',
dataType: 'json',
timeout: 60000,
success: function(data) {
$("#retrieve_data_wait").text(data.test);
self.message = 'Love the Vue.JS';
console.log('SUCCESS')
console.log(self.message);
},
error: function(data) {
$("#retrieve_data_wait").text("Fail");
}
// error: function(jqXHR, status, errorThrown) {
//   //the status returned will be "timeout" 
//     alert('Got an error (or reached time out) for data generation.  Please refresh page and try again.  If you see this more than once, please contact your customer success agent.');
// }
});
}
}
})

<div id="app">
<span id="retrieve_data_wait"></span>
</div>

Answer 1

问题是当你调用jQuery时，你的this上下文会丢失。你拥有的回调方法(success: function(没有对 Vue 的引用。传递正确上下文的方法是$.ajax调用中的context属性。

这一切都记录在jQuery网站上：https://api.jquery.com/jQuery.ajax/- 只需搜索"context"这个词，你就会找到它。

改进后的 ajax 调用应如下所示：

$.ajax({
url: '/test_json',
context: this,
//  [... etc ...]
success: function(data) {
this.message = "reference to Vue data message";
}
);

Answer 2

你可以通过在 ajax 成功句子的末尾添加bind(this(来将 ajax 调用绑定到父组件 Vue。它看起来像下面(我已经更新了，我意识到我有一个缺陷，现在它应该可以工作了(：

$.ajax({
url: '/test_json',
// etc.
//... etc.
success: function(data) {
this.message = "reference to Vue data message";
}bind(this),
);