Vue.js方法内无法修改data值，求技术支援

这种情况我碰到过好多次，结合你引入了Firebase/Firestore的情况来看，大概率是上下文（this指向）出问题了——异步回调简直是踩这个坑的重灾区！咱们一步步拆解：

最常见的元凶：回调函数里的this不是Vue实例 #

比如你可能写了类似这样的代码（结合Firestore场景）：

methods: {
  fetchUser() {
    db.collection('users').doc('some-id').get().then(function(doc) {
      // 这里的this根本不是Vue实例！
      this.name = doc.data().name;
    });
  }
}

普通function()回调里的this会指向回调函数自身，而不是你的Vue实例app，自然没法修改data里的name。

两个简单的解决办法： #

• 用箭头函数：箭头函数会继承外层的this，也就是Vue实例：

  methods: {
    fetchUser() {
      db.collection('users').doc('some-id').get().then((doc) => {
        this.name = doc.data().name; // 现在this就是Vue实例啦！
      });
    }
  }
  

• 提前把this存成变量：比如存成self或者vm，避免回调里的this跑偏：

  methods: {
    fetchUser() {
      const self = this; // 先把Vue实例存起来
      db.collection('users').doc('some-id').get().then(function(doc) {
        self.name = doc.data().name; // 用self代替this
      });
    }
  }
  

其他可能的小坑 #

• 方法声明写错了：你代码里写的是meth...，别漏写成meth了，必须是复数的methods，不然Vue根本认不出这是方法：

  // 错误写法
  var app = new Vue({
    data() { return { name: "" } },
    meth: { // 少了个ods！
      fetchUser() { ... }
    }
  })
  

• 修改了非响应式属性：如果是嵌套对象新增属性的话，Vue默认不会追踪，但你这里一开始就声明了name: ""，这个情况概率很低，不过要是碰到可以用Vue.set()或者展开运算符更新。

快速验证小技巧 #

你可以在方法里先打个日志，看看this到底是什么：

methods: {
  testThis() {
    console.log(this); // 如果是Vue实例，会看到一堆Vue相关的属性和方法
  }
}

要是输出的是window或者别的东西，那肯定是this指向的问题没错了！

内容的提问来源于stack exchange，提问作者alanko