Vue3：如何在@click函数中传递变量名以修改对应数据？

你需要传递变量名的字符串，而不是变量本身，然后通过Vue实例的this[变量名字符串]来直接修改data里的对应属性，具体修改如下：

修改后的按钮代码 #

<button @click="raiseStat('health')">Add</button>

修改后的函数代码 #

methods: {
    raiseStat(statName){
      this[statName]++
    }
}

原写法失效的原因 #

你之前传递health时，实际是把data里health的当前值（也就是1）传给了statName，这时候statName只是一个普通数值变量，修改它只会改变副本的值，完全不会影响data里的原变量。

而传递字符串'health'后，this[statName]等价于this.health，直接指向data里的响应式属性，修改它会触发Vue的响应式更新，页面也会同步显示变化后的数值。

如果后续需要添加其他属性（比如strength、mana），只需要在按钮里传递对应的字符串（raiseStat('strength')），不需要修改函数逻辑，扩展性很强。

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