Vuetify 3：如何在V-选择项目的右侧显示头像

ntjbwcob 于 2023-04-07 发布在 Vue.js

关注(0)|答案(2)|浏览(209)

如何在v-select项目的右侧显示头像？
我以为这会奏效：VuetifyjsPlayground
下面是来自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>

谢谢！

vue.js

来源：https://stackoverflow.com/questions/75927423/vuetify-3-how-to-show-avatar-at-right-side-of-v-select-item

2条答案

按热度按时间

91zkwejq1#

目前第3版的文档有点混乱，但为了更好的练习，我会使用列表项元素来定制和绑定 prop 。你可能还想使用选择槽来改进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/#slots

赞(0）回复(0）举报 2023-04-07

igsr9ssn2#

您的问题是您正在使用插槽中的插槽（append嵌套在item中）。v-select支持或，而不是两者嵌套在一起。对于您的用例，您可以只使用item插槽

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

更新的操场

赞(0）回复(0）举报 2023-04-07

我来回答

Vuetify 3：如何在V-选择项目的右侧显示头像

2条答案

相关问题

热门标签

最新问答