VueJS：如何为@change事件处理器提供循环索引上下文变量？

嘿，这个场景太常见了！其实只需要给你的handleChange方法多传个参数就行，两种简单方案供你选：

方案一：直接传递索引和事件对象 #

这是最符合Vue风格的做法，把循环的index作为第一个参数传给事件处理函数，再用$event拿到原生事件对象，就能同时获取索引和选中值了：

修改后的模板代码：

<div v-for="(item, index) in items" :key="index">
  <select @change="handleChange(index, $event)">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
</div>

然后对应的handleChange方法：

handleChange(index, event) {
  const selectedValue = event.target.value;
  console.log(`当前索引：${index}，选中值：${selectedValue}`);
  // 这里就可以同时使用两个参数做你需要的操作啦
}

方案二：通过自定义属性存储索引 #

如果你不想传多个参数，也可以给select标签加个自定义数据属性来存索引，然后在事件里读取：

模板代码：

<div v-for="(item, index) in items" :key="index">
  <select @change="handleChange" :data-index="index">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
</div>

对应的方法：

handleChange(event) {
  const index = parseInt(event.currentTarget.dataset.index, 10); // 注意转成数字类型
  const selectedValue = event.target.value;
  console.log(`当前索引：${index}，选中值：${selectedValue}`);
}

两种方法都能解决问题，个人更推荐第一种，代码更直观，也更贴合Vue的事件处理逻辑～

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