Vue3中点击事件触发后无法修改data属性值该如何解决？

以下是按概率从高到低排列的排查方向：

• 排查1：props与data变量重名冲突
  你最初的需求是修改props值，大概率你在props中已经声明了同名的showConsommationWindow属性。Vue中props优先级高于data，此时你操作的this.showConsommationWindow实际是只读的props，赋值操作不会生效。
  解决方法：把data中定义的内部状态变量名改为和props不同的名称即可，比如innerShowConsommationWindow。
• 排查2：检查methods的定义方式
  不要用箭头函数定义methods中的方法，箭头函数会绑定父级作用域的this，导致this不指向当前组件实例，赋值的showConsommationWindow实际不是data中的属性。
  错误写法示例：

// 错误写法
showConsommation: (boolValue) => {
  this.showConsommationWindow = boolValue
}

正确写法需使用普通函数：

// 正确写法
showConsommation(boolValue){
  this.showConsommationWindow = boolValue
}

• 排查3：确认值已修改只是模板未响应
  你可以在赋值语句后增加日志打印，确认变量是否真的没有被修改：

showConsommation(boolValue){
    alert('方法触发')
    this.showConsommationWindow = boolValue;
    // 新增这行查看控制台输出
    console.log('showConsommationWindow当前值：', this.showConsommationWindow)
}

如果控制台输出和你设置的值一致，说明值已经修改成功，问题出在模板渲染：

1. 检查模板中绑定的变量名是否和data中定义的完全一致，有没有拼写错误
2. 检查组件是否被多次实例化（比如用v-for渲染多个），操作的实例和你查看状态的实例不是同一个

• 排查4：修复响应式丢失问题
  如果确实出现响应式丢失（概率较低，选项式API中写在data返回中的属性默认是响应式的），可以用$set强制触发响应式更新：

this.$set(this, 'showConsommationWindow', boolValue)

• 排查5：检查自定义组件事件传参是否正确
  虽然你反馈alert可以正常触发，但如果自定义组件的事件传参异常，也可能导致传入的boolValue和预期不符，可以打印传入的参数确认是否正确。

内容的提问来源于stack exchange，提问作者Péah