Vuetify v-select自定义item插槽后选择机制失效，如何添加下拉项图标？

你遇到的问题是因为自定义item插槽时覆盖了Vuetify默认的选择交互逻辑，只需在自定义内容中手动绑定插槽提供的onClick方法即可恢复选择功能，同时保留图标显示效果。

修正后的完整代码 #

<v-select
  v-model="select"
  :items="countries"
  item-title="name"
  item-value="last"
  item-text="name"
  variant="solo"
>
  <template v-slot:selection="{ item }">
    <Icon :icon="item.raw.code"/>&nbsp; {{ item.raw.name }}
  </template>
  <template v-slot:item="{ item, onClick, selected }">
    <!-- 使用Vuetify列表项组件保持统一样式，同时绑定点击事件与选中状态 -->
    <v-list-item 
      @click="onClick" 
      :selected="selected"
      style="cursor: pointer;"
    >
      <Icon :icon="item.raw.code"/>&nbsp; {{ item.raw.name }}
    </v-list-item>
  </template>
</v-select>

关键说明 #

• 插槽提供的onClick方法是v-select内置的选择触发逻辑，必须绑定到自定义选项的点击元素上，才能让点击操作触发选中动作。
• selected属性可以用来控制选项的选中高亮样式，和默认v-select的交互体验保持一致。
• 如果不想用v-list-item，也可以直接在普通容器上绑定事件：

  <template v-slot:item="{ item, onClick }">
    <div 
      @click="onClick" 
      style="display: flex; align-items: center; padding: 0.5rem 1rem; cursor: pointer;"
    >
      <Icon :icon="item.raw.code"/>&nbsp; {{ item.raw.name }}
    </div>
  </template>
  

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