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