Vue.js中在v-for循环内绑定方法触发报错如何解决？

问题原因 #

你当前的代码报错是因为btns数组中存储的action是字符串类型，Vue的@click事件绑定只能识别函数引用或可执行的JS表达式，无法自动将字符串解析为可执行的方法，点击时相当于尝试调用字符串，自然会抛出类型错误。

解决方法 #

这里提供两种可行的修复方案： #

方案1：直接存储函数引用（更推荐）

先在methods中定义好对应的业务方法，然后在btns数组中直接绑定方法的引用，不需要加引号和括号：

1. 修正script部分代码：

export default {
  methods: {
    print() {
      // 打印逻辑
      console.log('执行打印操作')
    },
    anOtherMethod() {
      // 其他业务逻辑
      console.log('执行其他操作')
    }
  },
  data() {
    return {
      btns: [
        { text:'print', action: this.print },
        { text:'another action', action: this.anOtherMethod }
      ]
    }
  }
}

2. template部分不需要修改，原有绑定逻辑可直接生效：

<button v-for="(btn,i) in btns" :key="i" @click="btn.action">
  {{btn.text}}
</button>

方案2：存储方法名字符串，调用时动态匹配

如果你的场景需要把方法名存为字符串，只需要修改事件绑定逻辑，通过实例动态调用对应方法即可：

1. 修正template部分的事件绑定：

<button v-for="(btn,i) in btns" :key="i" @click="this[btn.action]()">
  {{btn.text}}
</button>

2. 修正btns数组的action为纯方法名（不要加括号）：

btns: [
  { text:'print', action: 'print' },
  { text:'another action', action: 'anOtherMethod' }
]

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