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

小编典典

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

ajax

我有一个带有一些数据的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 在字段更改时被调用（确定）
AJAX调用经过成功，我看到都在控制台上的预期输出data和this.name（OK）
但 name不会在VueJS实例中更新。

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

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

阅读 198

2020-07-26

共1个答案

小编典典

this.nameAJAX成功处理程序中存在范围问题。

该this.name内部是不一样this.name在你的Vue公司的组成部分。因此，不会在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;
    });

2020-07-26