使用v-for指令来遍历data中的tools数组，并为每个工具项绑定一个方法时出现一个问题

本文链接：https://blog.csdn.net/weixin_59630494/article/details/142788783

在Vue中，我使用v-for指令来遍历data中的tools数组，并为每个工具项绑定一个方法时出现一个问题。

<template>
  <div>
    <ul>
      <li v-for="(tool, index) in tools" @click="tool.method">
        <span v-html="tool.icon"></span>
        {{ tool.tooltip }}
      </li>
    </ul>
  </div>
</template>

    tools: [
      {
        tooltip: "属性查询",
        icon: "&#xe6ca;",
        method: "attributeQuery",
        isActive: false
      },
      ...
    ]

在点击按钮触发点击事件会报错

[Vue warn]: Error in v-on handler: "TypeError: handler.apply is not a function"

这表示我正在试图调用一个不是函数的值。在这个上下文中，这通常意味着我尝试在事件处理器中调用一个实际上不是方法的东西。

因此我对代码进行修改：

<li v-for="(tool, index) in tools" @click="callToolMethod(tool.method)">

    callToolMethod(methodName) {
      if (typeof this[methodName] === 'function') {
        this[methodName]();
      } else {
        console.error(`Method ${methodName} is not defined`);
      }
    }

这里首先检查 this[methodName] 是否是一个函数，如果是，则调用它。如果不是，则打印一个错误消息。