验证3:如何在v-select项目的右侧显示头像

Question

如何在v-select项的右侧显示头像?

我认为这将工作:Vuetifyjs操场

下面是来自playground的代码:

<template>
<v-app>
<v-main>
<v-select label="Select" :items="items" item-title="title" item-value="title">
<template v-slot:item="{ props, item }">
<template v-slot:append>
<v-avatar :image="item.avatar"></v-avatar>
</template>
</template>
</v-select>
</v-main>
</v-app>
</template>

<script setup>
import { ref } from 'vue'
const items = ref([
{ title: "California", avatar: "https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-v3-slim-text-light.svg" },
{ title: "Colorado", avatar: "https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-v3-slim-text-light.svg" },
{ title: "Florida", avatar: "https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-v3-slim-text-light.svg" },
])
</script>

谢谢!

Answer 1

文档目前在版本3中有点断断续续，但为了良好的实践，我会使用list item元素进行自定义并绑定您的道具。您可能还想使用选择槽来改进UI/UX。

<v-select label="Select" :items="items" item-title="title" item-value="title">
<template v-slot:selection="{ item, index, props }">               
<v-list-item :append-avatar="item.raw.avatar" v-bind="props">{{item.raw.title}}</v-list-item> 
</template>
<template v-slot:item="{ item, props }">
<v-list-item :append-avatar="item.raw.avatar" v-bind="props"></v-list-item>
</template>
</v-select>

示例:Vuetify Play

文档:https://vuetifyjs.com/en/components/selects/#槽

Answer 2

您的问题是您正在使用插槽中的插槽(append嵌套在item中)。V-select只支持两者之一，不支持两者嵌套在一起。对于您的用例，您可以使用item插槽

<template #item="{ item }">
<div>
{{ item.title }}
<v-avatar :image="item.raw.avatar" />
</div>
</template>

更新操场