问题描述

预想在Vue创建页面时接收后端数据，然后渲染到页面。
使用data进行数据绑定，可是数据修改不成功。

//想要修改data中的gameNum
data(){
    return{
      allGames:'',
      gameNum:0
    }
  }

mounted() {
    axios.post('http://localhost:3000/allGames').then(function (response){
      console.log(response.data.gameNum);//先输出响应回来的gameNum
      this.gameNum=response.data.gameNum;//赋值给data中的gameNum
      console.log(this.gameNum);//然后输出data中的gameNum
      }}

结果如下：

控制台只输出了响应回来的gameNum，并且报错this.gameNum没有找到！

问题分析

最开始的理解中this.gameNum指的是Vue中的数据gameNum，事实并不如此，这里的this代指window对象而不是Vue对象，所以真正找的是window对象下的gameNum，但是window下没有gameNum，所以就报错了。

解决办法

解决办法很简单，把指向vue对象保存给一个变量that，在后面引用that来修改数据即可。

mounted() {
    let that=this;//将vue对象的引用保存在that中
    axios.post('http://localhost:3000/allGames').then(function (response){
      console.log(response.data.gameNum);
      that.gameNum=response.data.gameNum;//使用that来指向vue
      console.log(that.gameNum);
    }}

控制台输出了正确结果：