如何为Vuetify 3 Combobox添加选中触发事件

方法一：使用@click:item事件（推荐） #

Vuetify 3 的 Combobox 提供了@click:item事件，该事件仅在点击下拉菜单中的选项时触发，完全匹配你的需求。只需在组件上添加该事件绑定即可：

<v-combobox
  v-model="values1"
  :items="uniq"
  class="flex-full-width mt-5"
  density="comfortable"
  placeholder="Suche..."
  append-inner-icon="mdi-magnify"
  variant="outlined"
  no-filter
  @update:modelValue="toogle"
  @update:search="updateForCustomerSearch"
  @click:item="handleSelect" <!-- 添加选中事件绑定 -->
/>

在脚本中定义对应的处理方法：

const handleSelect = (item) => {
  // 这里编写选中选项后需要执行的逻辑，item为当前选中的选项对象
  console.log('选中的选项:', item)
  // 执行你的指定方法
}

方法二：通过@update:modelValue结合判断（备选） #

如果需要基于modelValue更新触发，但要区分是选中选项还是手动输入，可以通过对比更新前后的值，结合选项列表判断：

<v-combobox
  v-model="values1"
  :items="uniq"
  class="flex-full-width mt-5"
  density="comfortable"
  placeholder="Suche..."
  append-inner-icon="mdi-magnify"
  variant="outlined"
  no-filter
  @update:modelValue="handleModelUpdate"
  @update:search="updateForCustomerSearch"
/>

脚本中实现方法：

let previousValue = ref('') // 保存上一次的model值

const handleModelUpdate = (newValue) => {
  // 判断新值是否存在于选项列表中，且与旧值不同
  const isFromSelect = uniq.some(item => item === newValue) && newValue !== previousValue
  if (isFromSelect) {
    // 执行选中选项后的逻辑
    console.log('通过选中选项更新值:', newValue)
  }
  previousValue.value = newValue
  // 保留原有的toogle逻辑
  toogle()
}

注意：方法一更直接精准，优先推荐使用；方法二更适合需要同时处理model更新的场景。

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