如何通过 jQuery AJAX 调用更新 VueJS 实例的数据？

Question

我有一个带有一些数据的 VueJS 实例：

var vm = new Vue({
    el: '#root',
    data: {
        id: '',
        name: {
            firstname: "", 
            lastname: "", 
            country: "", 
            valueset: false
        },
// ...

在我的 HTML 中，我也有：

<input class="id" type="text" size="4" maxlength="4" v-model.lazy="id" v-on:change="create_casenr">

所以填完这个字段后，我的实例的create_casenr方法就被触发了。

create_casenr: function(event) {
    // update the full name of user
    $.ajax({
        url: 'http://elk.example.com:9200/users/user/' + this.id
    })
    .done(function(data) {
        console.log(data);
        this.name = data._source;
        this.name.valueset = true;
        console.log(this.name);
    })
// ...

会发生什么：

• 在字段更改时调用create_casenr (OK)
• AJAX 调用成功通过，我在控制台上看到 data 和 this.name 的预期输出（确定）
• 但是 name 在 VueJS 的实例中没有更新。

我可以看到它没有更新，因为我的代码中依赖它的其他部分看不到它；我还检查了 VueJS Chrome 插件，所有变量都设置正确（包括id），name 除外。

当通过 jQuery AJAX 调用修改时，我应该以特定的方式处理 VueJS 实例的数据吗？

Answer 1

这里起作用的另一件事是 Vue.js 如何更新 DOM。有关详细信息，请阅读文档中的此部分：Async Update Queue

简而言之，在 Vue.js 完成更新 DOM 后使用“nexTick”回调来处理您的代码。

methods: {
   someMethod() {
      var self = this;
      $.ajax({
        url: 'http://...',
      }).done(function (data) {
        self.a = data.a;
        self.b = data.b;
        self.$nextTick(function () {
           // a and b are now updated
        }
      });
   }
}

Answer 2

this.name 的范围不同

create_casenr: function(event) {
// update the full name of user
$.ajax({
    url: 'http://elk.example.com:9200/users/user/' + this.id
})
.done(function(data) {
    console.log(data);
    this.name = data._source;
    this.name.valueset = true;
    console.log(this.name);
}.bind(this))

添加bind(this)

Answer 3

您的 AJAX 成功处理程序中存在 this.name 范围问题。

里面的this.name和你的Vue组件里面的this.name不一样。所以你的名字没有在 Vue 组件中设置。

您可以使用箭头函数来解决这个问题：

$.ajax({
    url: 'http://elk.example.com:9200/users/user/' + this.id
    }).done(data => {
        this.name = data._source;  // 'this' points to outside scope
        this.name.valueset = true;
    });

类似答案：https://stackoverflow.com/a/40200989/654825

关于箭头函数的更多信息：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions