How to display modified text from data member in :items object array for item-title in v-select (Vuetify) dropdown list?

Question

I am new to Vue and I am currently working with Vuetify to build dropdown "v-select".

If there is a way, that will be great! Otherwise, I am thinking of creating new array and covert data for some members in objects and copy them to new array and set that array as :items in v-select.

Here is my code

<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>

for resource in item-title, i want to display like if it is resource == company_user_licence then I want to display item-title to be Licence Permission: User

I have looked for ways to customize template for item-title, so far i have found ways to make templates for item-text and item-value, not item-title.

Please let me know if the question is not clear or need more details. Thank you!

:item-title="someFunction" and have someFunction do the required logic? — Jaromanda X
– Jaromanda X, Commented Feb 15, 2024 at 5:24
Hi Jaromanda, yes I thought about that but I decided to do template v-slot:item inside v-select instead. thanks for answering — May
– May, Commented Feb 16, 2024 at 4:10

Mojtaba · Accepted Answer · 2024-02-15 11:13:35Z

You can use the v-list-item component to customize 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>

if you want to implement more than one line logic you can change it :title='myCustomTitle()' to a method

May · Accepted Answer · 2024-02-16 04:04:15Z

This is what i had to come up with.

I also had to add vslot:selection on top of @Mojtaba answer or it won't show what i have selected. Thanks for answering!

Just documenting here in case if someone is looking for answers similar to mine.

<v-select 
    label="Select a permission to copy"
    variant="underlined"
    no-data-text="No permission to choose from"
    :items="permissionsToCopy"
    v-model="selectedPermissionToCopy"
    return-object
>
    <template v-slot:selection="{item, props}">
        <v-list-item v-bind="props" style="padding: 0;" :title="convertToReadableText(item.value)"></v-list-item>
    </template>
    <template v-slot:item="{item, props}">
        <v-list-item v-bind="props" :title="convertToReadableText(item.value)"></v-list-item>
    </template>
</v-select>

Collectives™ on Stack Overflow

How to display modified text from data member in :items object array for item-title in v-select (Vuetify) dropdown list?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related