如何显示 v-select (Vuetify) 下拉列表中项目标题的 :items 对象数组中数据成员的修改文本？

Question

我是 Vue 新手，目前正在与 Vuetify 合作构建下拉菜单“v-select”。

如果有办法那就太好了！否则，我正在考虑为对象中的某些成员创建新数组和隐藏数据，并将它们复制到新数组并将该数组设置为 :v-select 中的项目。

这是我的代码

<v-select 
    label="Select a permission to copy"
    variant="underlined"
    item-title="resource"
    no-data-text="No permission to choose from"
    :items="permissionsToCopy"
    v-model="selectedPermissionToCopy"
    return-object
>
</v-select>

对于

resource

中的

item-title

，我想显示为 如果是

resource == company_user_licence

那么我想将

item-title

显示为

Licence Permission: User

我一直在寻找自定义项目标题模板的方法，到目前为止，我已经找到了为项目文本和项目值而不是项目标题制作模板的方法。

如果问题不清楚或需要更多详细信息，请告诉我。谢谢！

Answer 1

您可以使用

v-list-item

组件来自定义

item-title

:

<template>
    <v-select label="User" :items="items" item-title="name">
        <template v-slot:item="{ props, item }">
            <v-list-item
                v-bind="props"
                :title="`${item.title} - ${item.value}`"
            ></v-list-item>
        </template>
    </v-select>
</template>

<script>
    export default {
        data: () => ({
            items: [
                {
                    name: 'John',
                    department: 'Marketing',
                },
                {
                    name: 'Jane',
                    department: 'Engineering',
                },
                {
                    name: 'Joe',
                    department: 'Sales',
                },
                {
                    name: 'Janet',
                    department: 'Engineering',
                },
                {
                    name: 'Jake',
                    department: 'Marketing',
                },
                {
                    name: 'Jack',
                    department: 'Sales',
                },
            ],
        }),
    }
    </script>

如果你想实现多行逻辑，你可以将其

:title='myCustomTitle()'

更改为方法