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的预期输出（OK）
但 name未在VueJS实例中更新。

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

在通过jQuery AJAX调用修改时，是否有一种特定的方式来解决VueJS实例的数据？

Answer 1

您的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

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

在这里起作用的另一件事是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
        }
      });
   }
}

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

3 个答案: