Please tell me if we can customize item-text
for v-select
?
I want customize each item in v-select
, something like this :
:item-text="item.name - item.description"
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 how v-select
should render items when selecteditem
: to describe how v-select
should render items when openedIt 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"
by v-slot:selection="data"
slot="item" slot-scope="data"
by v-slot:item="data"