VueJS 中的 AJAX 数据更新后 DOM 未更新

Question

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

AJAX 调用成功运行，并且确实data.message在此行中进行了更新：

self.message = 'Love the Vue.JS'

我可以看到它有效，因为它打印在控制台中。问题是 DOM 没有随着data.message. 当数据更新时，如何让它工作并更新 DOM？

self.message = 'Love the Vue.JS'

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.');
        // }
      });
    }
  }
})

Answer 1

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

这一切都记录在 jQuery 站点：https : //api.jquery.com/jQuery.ajax/ - 只需搜索“上下文”一词，您就会找到它。

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

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