Vuetify3中v-select选择选项后如何自动关闭菜单？

核心方案：利用插槽内置的select方法 #

当你使用自定义模板渲染v-select的选项时，只需在v-list-item上绑定点击事件，调用插槽提供的select方法即可——无需额外写ref和blur()，v-select会自动处理选中逻辑并关闭菜单，同时完全保留v-list-item的默认样式（指针光标、hover背景等）。

示例代码 #

<template>
  <v-select
    v-model="selectedItem"
    :items="items"
    label="选择项"
  >
    <template v-slot:item="{ item, select }">
      <v-list-item
        :title="item.name"
        :subtitle="item.desc"
        @click="select(item)"
      >
        <!-- 自定义内容示例：前置图标 -->
        <template v-slot:prepend>
          <v-icon>{{ item.icon }}</v-icon>
        </template>
      </v-list-item>
    </template>
  </v-select>
</template>

<script setup>
import { ref } from 'vue'

const selectedItem = ref(null)
const items = ref([
  { name: '选项1', desc: '描述文本1', icon: 'mdi-home' },
  { name: '选项2', desc: '描述文本2', icon: 'mdi-settings' }
])
</script>

方案说明 #

• Vuetify的v-selectitem插槽默认会传入select方法，该方法内部已封装了更新v-model、标记选中状态、关闭下拉菜单的完整逻辑，完全满足你让v-select自行处理选择流程的需求。
• 仅绑定点击事件不会破坏v-list-item的默认样式，所有原生交互效果都会保留。

复杂场景适配 #

如果需要在选中前执行自定义逻辑（比如验证、日志），可以先处理业务代码，再调用内置的select方法：

<v-list-item
  :title="item.name"
  @click="handleSelect(item, select)"
>
</v-list-item>

<script setup>
const handleSelect = (item, select) => {
  // 自定义前置逻辑
  console.log('选中前处理:', item)
  // 调用内置方法完成选中并关闭菜单
  select(item)
}
</script>

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