Customizing item-text in v-select
Yes you can, using scoped slot
as described in the doc and provide a template
.
For v-select
you have two scoped slot
:
selection
: to describe howv-select
should render items when selecteditem
: to describe howv-select
should render items when opened
It looks like this :
<v-select> // Don't forget your props
<template slot="selection" slot-scope="data">
<!-- HTML that describe how select should render selected items -->
{{ data.item.name }} - {{ data.item.description }}
</template>
<template slot="item" slot-scope="data">
<!-- HTML that describe how select should render items when the select is open -->
{{ data.item.name }} - {{ data.item.description }}
</template>
</v-select>
CodePen with a complex example
Vuetify Doc about Scoped Slot in V-Select
Edit for Vuetify 1.1.0+ : Those slots are also available with new components v-autocomplete
and v-combobox
as they inherit from v-select
.
Edit for Vue 2.6+, replace :
slot="selection" slot-scope="data"
byv-slot:selection="data"
slot="item" slot-scope="data"
byv-slot:item="data"
Slot removes autoselect on focus.
item-text
tye can be: string | array | function
then we can make:
:item-text="text"
and
methods: {
text: item => item.name + ' — ' + item.description
}
Shorthand :
:item-text="item => item.name +' - '+ item.description"
Here's an example in simple following code:
<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.text}`,
},
}
</script>
The following is the reference: https://vuetifyjs.com/en/components/autocompletes#advanced-slots