如何在v-for与v-on:click中同时获取索引和事件对象？

嘿，刚好碰到过这个问题，我来给你详细讲讲怎么实现～

在Vue的v-for循环里绑定点击事件时，想要同时拿到循环的索引和原生事件对象，主要有两种常用的方式，下面结合你的示例代码来演示：

方法1：主动传递索引和事件对象（推荐） #

Vue提供了特殊变量$event，可以直接把它作为参数传递给点击方法，同时带上循环的索引i。

模板代码： #

<div id="app">
  <ul>
    <!-- 同时传递索引i和事件对象$event -->
    <li v-for="(text, i) in todoList" @click="handleClick(i, $event)">{{ text }}</li>
  </ul>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>

JS代码： #

new Vue({
  el: "#app",
  data: {
    todoList: ["aaaaa", "bbbbbb", "ccccc"]
  },
  methods: {
    handleClick(index, event) {
      // 打印当前循环索引
      console.log("当前项索引：", index);
      // 打印原生事件对象，可获取点击元素、鼠标位置等信息
      console.log("点击事件对象：", event);
      // 示例：获取点击的li元素文本内容
      console.log("点击的内容：", event.currentTarget.innerText);
    }
  }
});

这种方法逻辑直接清晰，需要什么参数就主动传递，可读性和维护性都很强，是最常用的方案。

方法2：通过自定义属性获取索引（无参数传递场景） #

如果你的点击方法不想主动传参，那么方法的第一个参数默认就是事件对象。这时候想要获取索引，可以把索引绑定到元素的自定义data-*属性上，再通过事件对象提取。

模板代码： #

<div id="app">
  <ul>
    <!-- 将索引绑定到data-index自定义属性 -->
    <li v-for="(text, i) in todoList" :data-index="i" @click="handleClickWithoutParam">{{ text }}</li>
  </ul>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>

JS代码： #

new Vue({
  el: "#app",
  data: {
    todoList: ["aaaaa", "bbbbbb", "ccccc"]
  },
  methods: {
    handleClickWithoutParam(event) {
      // 通过dataset获取自定义属性值，注意转成数字类型
      const index = Number(event.currentTarget.dataset.index);
      console.log("当前项索引：", index);
      console.log("点击事件对象：", event);
    }
  }
});

这种方法适合不想在方法中定义多个参数的场景，但可读性稍弱，需要额外处理自定义属性的类型转换。

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