英文:
Vuetify 3: How to show avatar at right side of v-select item
问题
How can I show an avatar at the right side of a v-select item?
I thought this would work: Vuetifyjs Playground
Here is code from 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>
Thanks!
英文:
How can I show an avatar at the right side of an v-select item?
I thought this would work: Vuetifyjs Playground
Here is code from 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>
Thanks!
答案1
得分: 1
以下是翻译好的部分：
文档在版本3方面目前有些问题，但为了良好的实践，我建议使用列表项元素进行自定义，并绑定您的属性。您可能还想使用选择插槽以改善用户界面/用户体验。
<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][1]
文档：https://vuetifyjs.com/en/components/selects/#slots
[1]: https://play.vuetifyjs.com/#eNq9VEtu2zAQvQrBTVpAJGsY3QhOkKJAL9Bl5AUt0TYTiiRIWkkh6O6doWRbdposiiDeyPN7b97MSA89/eE97w6KlnSVVOuNTOqusoSsOia9z3+z0UptJyvbURlVJ2LkRpnbiv7OZkVJqQEmgic/wYFPlnQyCpz5eXR20hxmzhM64B9bIUBkXCpHNu0spPe5uiDaNuqlID44H8kA9cfq6XeGyw0bHRPDSlKCMGUbJjuZZJha5UE+89ED/XVsA/AQyuiA3fenpNzuMKzEDPNuxrYSF4N8QxFWzcScVXxo25dNvtsjpo5jPi4dHKetozHew0UpmLEO2icSVTpgWLfehUR6EtSWDGQbXEtu4MBuMLl2NqasOJJbzPjygOA9yTMtSUV/SqO3LlgtK1qQURj69yn5WApRNxbPNentn8fIa9eKxtVR6FbuVBTG7VwUU5yhxbolzFvDBaqXBKPY7ROP3Q5mNRTX1M64IBv36cS/gFc3nyJ4/TXvTIxLg3XRgo4bg1V7/hidhS9Bjw3CfeUAnFFJsgd9QIX2ub+D9U+73Nc9xEQ42KRbxRrX3i/5kn9j0vi95N9FA2c4D3MVW7YJ7jmqAMSgfsaBct7imcIAv+CLxYh7moDcRAR+BSiApVOBBXiDVFDwsrwj4ir3X0KuUl6JQeqhsgPM12j7FK9GW8c81nz9aP+HygyB9WukGQp60SXwjpV0/ReBy/m0
英文:
The docs are a bit hit and miss with version 3 at the moment but for good practice, I would use the list item element for your customisation and bind your props. You probably also want to use the selection slot for improved 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>
Example: Vuetify Play
答案2
得分: 1
你的问题在于你在一个插槽中使用了另一个插槽（append 嵌套在 item 中）。v-select 只支持其中一个，不支持两者嵌套在一起。对于你的用例，你可以只使用 item 插槽。
<template #item="{ item }">
<div>
{{ item.title }}
<v-avatar :image="item.raw.avatar" />
</div>
</template>
英文:
Your problem is that you're using a slot within a slot (append nested inside item). v-select supports either or, not both nested together. For your use case you can just use item slot
<template #item="{ item }">
<div>
{{ item.title }}
<v-avatar :image="item.raw.avatar" />
</div>
</template>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论