Vue3中v-autocomplete组件@input/change事件未触发问题排查

核心问题分析 #

你遇到的事件不触发问题，主要是v-autocomplete的配置错误导致选项无法被正确识别，进而无法触发@input/@change事件，同时还有响应式数据操作的潜在问题：

1. item-text和item-value配置错误 #

你的items是通过moduleNamesAndEcts.map(module => module.name)生成的字符串数组，但却设置了item-text="name"和item-value="name"——这两个属性是用于对象数组的，用来指定每个对象中作为显示文本和绑定值的属性名。当items是字符串数组时，这两个配置会让组件试图去读取每个字符串的name属性（显然不存在），导致选项无法被正确选中，自然不会触发选择事件。

2. 响应式数据操作问题 #

如果targetModules是用ref创建的响应式数组，直接通过targetModules[targetIndex]['creditPoints']赋值不会触发响应式更新，需要操作其.value属性。

3. 事件绑定写法冗余（可选优化） #

你用箭头函数包裹事件回调的写法本身没问题，但可以简化为直接传递参数，避免不必要的函数嵌套。

修正后的代码 #

模板部分 #

<v-row
    v-for="(target, targetIndex) in targetModules"
    :key="targetIndex"
>
    <v-autocomplete
          v-model="target.modulName" <!-- 直接遍历target，简化绑定 -->
          :items="moduleNamesAndEcts.map(module => module.name)"
          :rules="rules.text"
          label="Module"
          <!-- 移除item-text和item-value，因为items是字符串数组 -->
          @input="updateEcts($event, targetIndex)" <!-- 简化事件绑定 -->
        />
</v-row>

脚本部分 #

const updateEcts = (newModuleName, targetIndex) => {
    console.log("HELLO!")
    const module = moduleNamesAndEcts.value.find(module => module.name === newModuleName);
    if (module) {
        // 如果targetModules是ref创建的，必须操作.value
        targetModules.value[targetIndex].creditPoints = module.ects;
        // 如果targetModules是reactive创建的数组，直接赋值即可：
        // targetModules[targetIndex].creditPoints = module.ects;
        console.log(module.ects)
    }
}

额外优化建议 #

如果希望直接使用对象数组作为items，可以更简洁地配置v-autocomplete，同时避免map操作：

<v-autocomplete
      v-model="target.modulName"
      :items="moduleNamesAndEcts"
      :rules="rules.text"
      label="Module"
      item-text="name" <!-- 此时items是对象数组，这两个配置生效 -->
      item-value="name"
      @input="updateEcts($event, targetIndex)"
    />

这种情况下，@input的$event会是选中的对象，你需要在updateEcts里调整逻辑：

const updateEcts = (selectedModule, targetIndex) => {
    console.log("HELLO!")
    if (selectedModule) {
        targetModules.value[targetIndex].creditPoints = selectedModule.ects;
        console.log(selectedModule.ects)
    }
}

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