Vuetify v-select如何仅在用户选择选项时触发事件？

如果用的是Vue Select组件，默认的change事件确实会在输入过滤词时触发——因为输入时组件会实时更新选中状态（比如无匹配项时选中值变为null）。要实现仅在用户点击选择选项或按Enter选中高亮选项时触发逻辑，有两种靠谱方案：

方案一：用原生的@select事件（首选） #

Vue Select本身提供了select事件，这个事件只在用户明确选中选项时触发，输入关键词过滤时完全不会触发，正好匹配你的需求：

<v-select
  v-model="selectedItem"
  :options="yourOptionsList"
  @select="handleOptionSelect"
></v-select>

<script>
export default {
  data() {
    return {
      selectedItem: null,
      yourOptionsList: ['选项1', '选项2', '选项3'] // 替换成你的选项数组
    }
  },
  methods: {
    handleOptionSelect(selectedVal) {
      // 这里写你需要执行的业务逻辑
      console.log('用户确认选中了:', selectedVal)
    }
  }
}
</script>

方案二：通过@input事件做校验兜底 #

如果因为版本或其他原因用不了select事件，可以监听input事件，再判断当前值是否是有效选项：

<v-select
  v-model="selectedItem"
  :options="yourOptionsList"
  @input="handleInputCheck"
></v-select>

<script>
export default {
  data() {
    return {
      selectedItem: null,
      yourOptionsList: ['选项1', '选项2', '选项3']
    }
  },
  methods: {
    handleInputCheck(value) {
      // 检查当前值是否存在于选项列表中
      const isValid = this.yourOptionsList.includes(value)
      if (isValid) {
        // 确认是有效选中，执行逻辑
        console.log('有效选中:', value)
      }
    }
  }
}
</script>

另外补充：如果用的是Vuetify的v-select，它的默认change事件本来就是只在用户确认选中时触发，输入关键词时不会触发。如果遇到这种情况，检查下是不是给组件加了特殊配置（比如实时绑定的额外逻辑）导致异常触发。

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