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

Posted 2023-02-22

【中文标题】如何通过 jQuery AJAX 调用更新 VueJS 实例的数据？

【英文标题】：How to update data of a VueJS instance from a jQuery AJAX call?

【发布时间】：2017-03-06 04:53:54

【问题描述】：

我有一个带有一些数据的 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 实例的数据吗？

【参考方案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
        
      );
   

【参考方案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)

【讨论】：

看起来 .bind() 在 jQuery 3 中已被弃用并且更早不鼓励使用（根据 api.jquery.com/bind）

@WoJ ：它是绑定 ES5.1 函数来绑定匿名函数的内部 this，请参见此处：developer.mozilla.org/fr/docs/Web/javascript/Reference/… 并且它没有被弃用；-)

【参考方案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://***.com/a/40200989/654825

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

【讨论】：

对于未来的读者：截至 2016 年 10 月，IE 不支持箭头功能（并且可能永远不会支持，因为 IE 11 是最后一个 IE）。 Edge、Chrome、Firefox 都可以。

是的，IE11 不支持箭头功能。但是当使用 vue-cli 进行生产构建时，babel 编译器负责将箭头函数转换为 ES5 兼容代码。所以你仍然可以使用箭头函数，但在 Chrome / Firefox 中进行整个开发，并在 IE11 中进行最终测试。

谢谢 - 我不知道 vue-cli。