Vuetify 3自定义item插槽导致VSelect选项无法选中的解决方法

问题 #

在Vue 3项目中使用Vuetify 3的VSelect组件时，自定义item插槽后选项无法选中，代码如下：

<v-select
  v-model="tag"
  :items="tags"
  variant="solo"
  label="Tags" >
  <template #item="{ item }" >
    <v-list >
      <v-list-item :title="item.title" />
    </v-list>
  </template>
</v-select>

数据定义：

tag: null,
tags: [
  { title: 'example1', value: 0 },
  { title: 'example2', value: 1 },
],

目前选项能正常显示，但点击无法选中。

解决方案 #

自定义item插槽会覆盖VSelect默认的选中交互逻辑，同时外层嵌套的<v-list>会破坏下拉菜单原有DOM结构，导致选中失效。修复方法如下：

1. 移除多余的外层<v-list>（VSelect下拉容器本身已是v-list组件）
2. 在自定义列表项中绑定插槽提供的select方法（用于触发选中）和isSelected状态（用于显示选中样式）

修改后的完整代码：

<v-select
  v-model="tag"
  :items="tags"
  variant="solo"
  label="Tags"
>
  <template #item="{ item, select, isSelected }">
    <v-list-item 
      :title="item.title"
      @click="select(item)"
      :selected="isSelected"
    />
  </template>
</v-select>

数据部分保持不变即可，此时点击选项就能正常触发选中并更新v-model的值。

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