Vue.js中@change处理器内无法修改data数据问题求助

看起来你遇到的这个情况挺让人困惑的——代码里明明给this.error赋值成功了，控制台也打印出了正确的内容，但页面就是不更新，Vue Devtools里的error还是空的。我之前也碰到过类似的问题，大概率和上下文指向或者响应式数据追踪有关，下面是几种可能的原因和对应的解决办法：

1. 先确认this是不是当前组件的实例 #

虽然你打印this.error显示正确，但有可能这个this并不是你当前的Vue组件实例（比如不小心在某个地方改变了函数的上下文）。你可以在validateFile里加一行日志，直接确认this的身份：

validateFile(file) {
  console.log('当前this是否为组件实例:', this._isVue); // Vue实例会有这个内置属性
  if (!file.type.includes('video/')) {
    this.error = 'wrong format';
    console.log(this.error);
  }
}

如果打印出来是false，说明上下文不对。你可以改成箭头函数来绑定组件上下文：

methods: {
  validateFile: (file) => {
    if (!file.type.includes('video/')) {
      this.error = 'wrong format';
      console.log(this.error);
    }
  },
  uploadFile(e) {
    const file = e.target.files[0];
    this.validateFile(file);
  },
}

不过更推荐的是检查调用validateFile的方式，确保没有用call/apply之类的方法改变它的上下文。

2. 强制触发响应式更新 #

有时候Vue的响应式系统可能因为某些边缘情况没检测到数据变化（虽然你的error是在data里定义的，理论上应该是响应式的），可以试试用this.$set来赋值，强制触发更新：

this.$set(this, 'error', 'wrong format');

或者手动调用更新方法：

this.error = 'wrong format';
this.$forceUpdate();

3. 检查模板的绑定是否正确 #

确保页面上的div.error里的{{ error }}确实指向当前组件的data：

• 如果这个div是在父组件模板里，而input是子组件的，那父组件的error自然是空的，你需要通过props或者自定义事件把错误信息传递给父组件。
• 仔细检查拼写，有没有写成{{ errors }}这种错误的变量名。

4. 排查有没有其他代码重置了error #

看看组件里的其他地方（比如生命周期钩子、其他方法）有没有在修改error的值，比如会不会在uploadFile执行完之后，有别的代码悄悄把this.error重置成了空字符串。

5. 确认Vue Devtools选对了组件实例 #

如果页面里有多个相同的组件，Vue Devtools可能默认显示的是第一个实例的data，你需要切换到你正在操作的那个组件，看看它的error值是不是已经正确赋值了。

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