What is the best way to show customized text from a data member within the :items object array for the item title in a v-select (Vuetify) dropdown menu

Question

What is the best way to show customized text from a data member within the :items object array for the item title in a v-select (Vuetify) dropdown menu

Currently, I am new to Vue and exploring Vuetify while working on building a dropdown using "v-select".

If there is a simpler way to achieve this, it would be awesome! Otherwise, my plan is to create a new array, convert data for certain members into objects, copy them to the new array, and then set that array as :items in v-select.

Below is my code snippet:

<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 aim to display it like - if it is resource == company_user_licence then I want the item-title to show as Licence Permission: User.

I have been searching for ways to customize the template for item-title, but so far I have only found methods for item-text and item-value, not item-title.

If you need further clarification or more details, please don't hesitate to ask. Thank you!

javascript vue.js frontend vuetify.js v-select

Answer 1

Answer №1

To customize the item-title using the v-list-item component, you can follow this example:

<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 need to implement more complex logic for the title, you can use a method like this: :title='myCustomTitle()'.

Answer 2

To customize the item-title using the v-list-item component, you can follow this example:

<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 need to implement more complex logic for the title, you can use a method like this: :title='myCustomTitle()'.

Answer 3

Answer №2

Here is my solution that I came up with.

In addition to @Mojtaba's answer, I had to include vslot:selection for it to display my selected item correctly. Thank you for the help!

I'm documenting this here in case someone else is looking for similar solutions.

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

Answer 4

Here is my solution that I came up with.

In addition to @Mojtaba's answer, I had to include vslot:selection for it to display my selected item correctly. Thank you for the help!

I'm documenting this here in case someone else is looking for similar solutions.

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

What is the best way to show customized text from a data member within the :items object array for the item title in a v-select (Vuetify) dropdown menu

Answer №1

Answer №2

Similar questions

Acquiring the item by referencing one of its property's values

Changing the color of a progress bar in Bootstrap based on a specific percentage level

How do I automatically redirect to a different URL after verifying that the user has entered certain words using Javascript?

Utilizing Ajax: Sending Customized Data to a Modal

Children components in Vue.js are receiving an undefined props object

Tips for keeping a specific key value pair as the final entry in a Typescript Object

Showcasing the time variance using javascript/jquery

Verify the presence of a specific value within an array of objects in JavaScript that was retrieved from an AJAX response, and then

Indicate the end of the row in JavaScript when using the match() function

Exploring the process of utilizing CodeMirror within Vue.js to transmit specific line numbers

Having difficulty displaying elements from two arrays at particular intervals

I'm currently attempting to launch my Discord bot, but I keep encountering an error message even though I have discord.js properly installed

Looking for consistent vertical and horizontal scrolling behavior in a React project

Previewing an uploaded image before submitting with FileBase64: A step-by-step guide

calculation of progress bar advancement

employing ajax for handling a form

Run some code and then enter interactive mode

Playing sound files on Angular using Howler.JS

Identify the browser dimensions and implement CSS styling for all screen resolutions

Retrieve a specific object from a JSON array nested within an array of objects, by utilizing a PHP script