数据不会在Vue JS中更新

Question

我有一个简单的形式像这样

<form @submit.prevent="getSummary">
    <input type="text" v-model="userAcccount" placeholder="Enter Account 
    Number">
    <button type="submit" class="btn btn-xs btn-default">Submit</button>
</form>

Vue中我的方法对象中的getSummary方法是这样的

methods: {
        getSummary () {               
            axios.get('core/handle.php', {
                params: {
                  accountNumber: this.userAcccount
                }
              })
              .then(function (response) {
                this.userData = response.data;
                console.log(this.userData);
              })
              .catch(function (error) {
                alert(error);
            });
        }
    }

我的数据对象包含

data: {
        userAcccount: '',
        userData: []
    },

我试图用axios的响应更新userData，然后使用它填充表以进行测试，我只是尝试了

<span v-if="userData.length > 0">
      some data 
</span>
<span v-else>
      data not found
</span>

console.log向我显示userData已更新，但是上面的这段代码没有更改。

Answer 1

在then函数中，您无法通过this访问VM。 您可以通过以下三种方法解决此问题：

1. 明确地将外部this作为执行上下文绑定到函数（ES5函数具有自己的this）：

    .then(function (response) { this.userData = response.data; console.log(this.userData); }.bind(this)) 

2. this上下文存储在本地变量中，例如self或that ：

    getSummary () { const self = this; axios.get('core/handle.php', { params: { accountNumber: this_.userAcccount } }) .then(function (response) { self.userData = response.data; console.log(self.userData); }) .catch(function (error) { alert(error); }); } 

3. 使用没有this功能的ES6箭头功能：

    .then(response => { this.userData = response.data; console.log(this.userData); }) 

Javascript中的this概念与许多其他编程语言不同，因为它描述了函数的执行上下文。 这不是一个容易掌握的概念，但这帮助我进入了它：

http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/

作为参考，MDN始终是一个不错的选择：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this

Answer 2

保存的语境this ，你是好去。

methods: {
        getSummary () {
           var this_= this;
            axios.get('core/handle.php', {
                params: {
                  accountNumber: this_.userAcccount
                }
              })
              .then(function (response) {
                this_.userData = response.data;
                console.log(this_.userData);
              })
              .catch(function (error) {
                alert(error);
            });
        }
    }

如果那不起作用，请添加this_.$forceUpdate(); 到this_.userData = response.data之后的响应函数，它将始终有效;）

Answer 3

使用ES6箭头功能，您可以通过稍微重写来访问回调中的响应，如下所示：

.then(response => {
    this.userData = response.data;
    console.log(this.userData);
})

这是因为您当前正在使用this到达axios请求上下文，因为userData不在您的范围内，所以它显然为null。 通过使用箭头函数语法，您可以访问userData所在的父组件。