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