Vue中无event参数时如何获取调用函数的元素？

看起来你遇到的问题是事件参数传递方式不对导致的！在Vue里，当你在带参数的事件绑定中要传递原生事件对象时，得用$event来指代，而不是直接写event。我来给你一步步解决：

首先，你当前代码里写的v-on:change="calculateARV(event, index)"，这里的event并没有被Vue识别为原生事件对象，而是被当成了一个未定义的普通变量，所以event是undefined，自然event.target就无效了。

解决方案1：正确传递原生事件对象 #

把事件绑定里的event改成$event，这样Vue才会把原生事件对象传进去：

<select id="sel_subUse" v-on:change="calculateARV($event, index)">
  <!-- 另外，option里的filter方法不需要传event，它是渲染数据用的，和事件无关 -->
  <option v-for="subUse in filter(index)" :value="subUse">{{ subUse }}</option>
</select>

然后在你的calculateARV方法里，就能正常通过event.target获取到触发事件的select元素了：

methods: {
  calculateARV(event, index) {
    const selectElement = event.target;
    console.log('当前select元素：', selectElement);
    // 这里可以继续你的业务逻辑，比如获取选中值、操作元素等
  },
  filter(index) {
    // 根据index过滤subUse数据的逻辑
    // 示例：return this.someData.filter(item => item.groupIndex === index);
  }
}

解决方案2：使用ref获取元素（无需传递event） #

如果你不想依赖事件对象，也可以用Vue的ref特性来获取元素。因为是在v-for循环里，我们可以把ref存成一个数组，对应每个index的select元素：

首先在data里定义一个数组来存ref：

data() {
  return {
    selectRefs: []
  }
}

然后修改模板里的select绑定：

<select 
  :ref="el => { if(el) selectRefs[index] = el }" 
  v-on:change="calculateARV(index)"
>
  <option v-for="subUse in filter(index)" :value="subUse">{{ subUse }}</option>
</select>

最后在calculateARV方法里通过index获取对应的元素：

methods: {
  calculateARV(index) {
    const selectElement = this.selectRefs[index];
    console.log('当前select元素：', selectElement);
    // 同样可以获取选中值：selectElement.value
  }
}

两种方法都能解决你的问题，第一种更贴合事件驱动的场景，第二种则更直接通过ref获取元素，你可以根据自己的需求选择。

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