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

[mayphyuoo]

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!

[mayphyuoo]

This is what i have come up with.

logic is in convertToReadableText function

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