Sometimes, we want to customize item-text in Vuetify v-select with Vue.js.
In this article, we’ll look at how to customize item-text in Vuetify v-select with Vue.js.
How to customize item-text in Vuetify v-select with Vue.js?
To customize item-text in Vuetify v-select with Vue.js, we fill in the selection and item slot.
For instance, we write
<template>
<v-select
label="Names"
v-model="name"
:items="names"
item-value="id"
item-text="name"
return-object
>
<template v-slot:selection="{ item }">
{{ getText(item) }}
</template>
<template v-slot:item="{ item }">
{{ getText(item) }}
</template>
</v-select>
</template>
<script>
export default {
data: () => ({
names: [
{ id: 1, name: "Paul", age: 23 },
{ id: 2, name: "Marcelo", age: 15 },
{ id: 3, name: "Any", age: 30 },
],
name: null,
}),
methods: {
getText: (item) => `${item.name} - ${item.age}`,
},
};
</script>
to fill in the selection slot to customize the text for the selection.
And we fill in the slot:item slot to customize the text for the drop down options.
item has the entry in names array for the selection slot.
And item has the entry in names array being rendered in the drop down.
Conclusion
To customize item-text in Vuetify v-select with Vue.js, we fill in the selection and item slot.
