Vue项目视图存在多个v-select时如何触发其@change事件？

算力阿峰

2026-10-5

v-select @change事件无法触发的解决方法

你提供的截断代码如下：

<v-select     :id="`selectPs${item['id']}`"    label="name"
:options="programsToSelect"    @change="signalChangeProgram($event,
item['

页面视图参考：
页面视图展示

以下是可落地的排查和解决步骤：

首先修复事件绑定语法问题
你提供的代码中@change回调的参数部分没有写全，存在语法错误，会直接导致事件无法触发，修正后的完整语法参考：

<v-select 
  :id="`selectPs${item['id']}`"
  label="name"
  :options="programsToSelect"
  @change="signalChangeProgram($event, item['id'])"
  v-model="selectedVal"
></v-select>

要确保属性引号、函数括号、参数都完整闭合。

适配Vuetify版本的事件规则
- Vuetify 2.x版本直接使用@change即可，事件回调默认参数为当前选中的选项值
- Vuetify 3.x版本优先使用@update:model-value事件代替@change，绑定逻辑和@change完全一致，触发更稳定：
```
<v-select 
  :id="`selectPs${item['id']}`"
  label="name"
  :options="programsToSelect"
  @update:model-value="signalChangeProgram($event, item['id'])"
  v-model="selectedVal"
></v-select>
```
校验options数据格式
确保programsToSelect数组的每一项都包含name字段（对应你设置的label="name"），以及默认的value字段，如果你自定义了item-value属性，要确保对应字段存在，否则v-select无法识别选中行为，不会触发变更事件。
兼容方案：监听v-model值变化
如果事件绑定始终不生效，可以给每个v-select绑定唯一的v-model变量，通过watch监听该变量的变化，执行signalChangeProgram的对应逻辑，完全可以替代change事件的效果。