如何在Vue的v-for循环中动态绑定v-on:click事件？

方法一：直接绑定方法引用 #

如果你的menuItems数组里每个项的click字段存的是组件methods中定义好的方法引用，直接绑定即可，但要注意初始化时确保方法的this指向正确（比如在created钩子中赋值）：

// 组件的data和methods
data() {
  return {
    menuItems: [
      { name: '菜单1', icon: 'bx-home', click: null },
      { name: '菜单2', icon: 'bx-user', click: null }
    ]
  }
},
created() {
  // 给每个menuItem的click赋值对应的方法
  this.menuItems[0].click = this.handleMenu1
  this.menuItems[1].click = this.handleMenu2
},
methods: {
  handleMenu1() {
    console.log('点击了菜单1')
    // 菜单1的业务逻辑
  },
  handleMenu2() {
    console.log('点击了菜单2')
    // 菜单2的业务逻辑
  }
}

模板中直接绑定：

<span v-for="(menuItem, index) in menuItems" :key="index">
    <li>
    <a>
        <i class="bx" :class="menuItem.icon || 'bx-square-rounded'" />
        <span class="links_name" @click="menuItem.click">{{ menuItem.name }}</span>
    </a>
    <span class="tooltip">{{ menuItem.tooltip || menuItem.name }}</span>
    </li>
</span>

方法二：统一处理函数+参数区分（更推荐） #

这种方式不需要给每个菜单项单独存方法，而是通过传递菜单标识来执行不同逻辑，更易维护和调试：

// 组件的data和methods
data() {
  return {
    menuItems: [
      { name: '菜单1', icon: 'bx-home', id: 'menu1' },
      { name: '菜单2', icon: 'bx-user', id: 'menu2' }
    ]
  }
},
methods: {
  handleMenuClick(menuItem) {
    switch(menuItem.id) {
      case 'menu1':
        console.log('点击了菜单1')
        // 执行菜单1的逻辑
        break
      case 'menu2':
        console.log('点击了菜单2')
        // 执行菜单2的逻辑
        break
      default:
        break
    }
  }
}

模板中绑定统一方法并传参：

<span v-for="(menuItem, index) in menuItems" :key="index">
    <li>
    <a>
        <i class="bx" :class="menuItem.icon || 'bx-square-rounded'" />
        <span class="links_name" @click="handleMenuClick(menuItem)">{{ menuItem.name }}</span>
    </a>
    <span class="tooltip">{{ menuItem.tooltip || menuItem.name }}</span>
    </li>
</span>

方法三：通过方法名字符串绑定 #

如果你的menuItems里存的是方法名的字符串（比如click: 'handleMenu1'），可以通过$methods来调用：

模板写法：

<span class="links_name" @click="$methods[menuItem.click]">{{ menuItem.name }}</span>

对应data定义：

data() {
  return {
    menuItems: [
      { name: '菜单1', icon: 'bx-home', click: 'handleMenu1' },
      { name: '菜单2', icon: 'bx-user', click: 'handleMenu2' }
    ]
  }
}

内容的提问来源于stack exchange，提问作者Sergio Camilo Espinosa Botero