Vue中如何为数组内指定元素添加@click事件绑定

嘿，你之前的做法其实走进了jQuery操作DOM的误区啦，Vue是数据驱动的框架，咱们得用Vue的思路来解决这个问题，不能直接给数组元素调用attr()方法（那是jQuery的玩法）。下面给你几种靠谱的实现方案，按需选择就行：

方案1：模板内直接条件绑定事件 #

最简单的方式就是在<li>的@click绑定里直接判断当前item的route，只有符合条件才触发方法：

<template>
  <ul>
    <li 
      v-for="item in menuItems" 
      :key="item.route" 
      @click="item.route === '/test1' ? handleMyMethod : null"
    >
      {{ item.title }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { title: 'test1', route: '/test1'}, 
        { title: 'test2', route: '/test2'}
      ]
    }
  },
  methods: {
    handleMyMethod() {
      // 这里写你要执行的逻辑
      console.log('test1被点击啦')
    }
  }
}
</script>

这种方式适合逻辑简单的场景，直接在模板里完成判断。

方案2：给数组元素添加标识字段 #

如果后续需要扩展更多判断条件，可以先给数组里的元素加一个自定义标识，再通过这个标识控制事件绑定：

<template>
  <ul>
    <li 
      v-for="item in menuItems" 
      :key="item.route" 
      @click="item.needClick ? handleMyMethod : null"
    >
      {{ item.title }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { title: 'test1', route: '/test1'}, 
        { title: 'test2', route: '/test2'}
      ]
    }
  },
  created() {
    // 初始化时给需要绑定事件的元素添加标识
    this.menuItems = this.menuItems.map(item => ({
      ...item,
      needClick: item.route === '/test1'
    }))
  },
  methods: {
    handleMyMethod() {
      console.log('test1被点击啦')
    }
  }
}
</script>

这种方式更灵活，后续要修改判断条件或者给其他元素加事件，只需要调整needClick的赋值逻辑就行。

方案3：在方法内部做判断 #

如果不想在模板里写判断，也可以给所有<li>都绑定点击事件，然后在方法里判断当前点击的item是否符合条件：

<template>
  <ul>
    <li 
      v-for="item in menuItems" 
      :key="item.route" 
      @click="handleMyMethod(item)"
    >
      {{ item.title }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { title: 'test1', route: '/test1'}, 
        { title: 'test2', route: '/test2'}
      ]
    }
  },
  methods: {
    handleMyMethod(item) {
      // 只在item.route为/test1时执行逻辑
      if (item.route === '/test1') {
        console.log('test1被点击啦')
      }
    }
  }
}
</script>

这种方式把判断逻辑放到了方法里，模板更简洁，适合后续逻辑比较复杂的场景。

为啥你之前的做法不对？ #

你用this.menuItems.forEach((item) => { if(item.route === '/test1') { item.attr('@click', 'method') } })的写法，是把数组元素当成了DOM元素来操作，但实际上menuItems里的是普通JavaScript对象，根本没有attr()方法（那是jQuery DOM对象的方法）。而且Vue的核心是数据驱动视图，直接操作DOM属性会打破响应式绑定，容易出现数据和视图不一致的问题，咱们得尽量避免这种操作哦～

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