Vuetify 3+ v-select搜索时自动选中问题求助

问题 #

在Vuetify 3+中为v-select添加自定义搜索框后，输入关键词筛选选项时，组件会自动选中匹配的结果项，而非仅在手动点击复选框时触发选中操作。

修复方案 #

1. 添加no-auto-select属性 #

给v-select组件添加no-auto-select属性，这是Vuetify原生提供的配置，用于禁用菜单打开或选项更新时的自动选中行为。

修改后的v-select核心代码 #

<v-select
      :item-title="itemTitle"
      :item-value="itemValue"
      :items="filteredItems"
      :loading="!disabled ? loading : false"
      :menu-props="menuProps"
      :model-value="modelValue"
      :name="name"
      :placeholder="placeholder"
      :prepend-inner-icon="icon"
      :readonly="disabled"
      :required="required"
      :return-object="returnObject"
      :rules="rules"
      attach
      width="220px"
      class="custom-menu-select"
      dense
      density="compact"
      hide-details
      no-auto-select <!-- 新增属性，禁用自动选中 -->
      @update:model-value="updateModelValue"
      @update:menu="updateMenu"
>
  <!-- 原有插槽内容保持不变 -->
</v-select>

2. 保留现有筛选逻辑 #

你的filteredItems计算属性已经通过数组克隆避免了修改原props数据，这部分无需调整，继续使用即可：

const filteredItems = computed(() => {
  const clonedItems = [...props.items]
  if (!props.enableSearch) return clonedItems
  if (props.serverSearch) return localItems.value
  if (!searchQuery.value) return clonedItems
  return clonedItems.filter((item) =>
    item[props.itemTitle].toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})

原理 #

no-auto-select属性会阻止v-select在选项列表更新（比如搜索筛选后）时自动匹配并选中项，确保只有用户手动点击选项时才会触发model-value的更新，完全符合需求。

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