小编典典

如何通过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调用经过成功,我看到都在控制台上的预期输出datathis.name(OK)
  • name不会在VueJS实例中更新。

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

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


阅读 196

收藏
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