Customizing Item-Text in V-Select

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 how v-select should render items when selected
  • item : to describe how v-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" by v-slot:selection="data"
  • slot="item" slot-scope="data" by v-slot:item="data"

Get the item-text from a v-select

You should add return-object prop in order to get the whole object properties and bind that object using v-model:

<v-select
:items="owners"
return-object
item-text="username"
item-value="id"
label="Owner"
v-model="editedItem"
></v-select>

Vue v-select problem with v-slot not showing text

slot and slot-scope are deprecated as of Vue 2.6.0.

The new slot syntax combines those two props into v-slot, so the equivalent item slot is:

<template v-slot:item="scope">
<span>{{ scope.item.description }}</span>
</template>

Note the scope contains an item property that can be used to access description. You can use object destructuring to simplify that to:

<template v-slot:item="{ item }">
<span>{{ item.description }}</span>
</template>

Similarly, you'll probably want a custom selection slot that renders the appearance of the selected item:

<template v-slot:selection="{ item }">
<span>{{ item.description }} ({{ item.value }})</span>
</template>

The final template should look similar to this:

<v-select v-model="dLevelSelected" :items="dLevels" solo>
<template v-slot:item="{ item }">
<span>{{ item.description }}</span>
</template>
<template v-slot:selection="{ item }">
<span>{{ item.description }} ({{ item.value }})</span>
</template>
</v-select>

demo

Vuetify concatenate two fields in v-select's item-text

You need to define a template not only for the slot item but also for the slot selection when using <v-select>:

<template slot="selection" slot-scope="data">
<v-chip
close
@input="data.parent.selectItem(data.item)"
:selected="data.selected"
class="chip--select-multi"
:key="JSON.stringify(data.item)"
>
<v-avatar>
<img :src="data.item.avatar">
</v-avatar>
{{ data.item.name }}
</v-chip>
</template>

See

https://vuetifyjs.com/components/selects#6-scoped-slots

for reference.

This can also be a much simpler solution like the one you're trying to achieve:

<template slot="selection" slot-scope="data">
{{ data.item.name }}, {{ data.item.group }}
</template>

Also see it in action:

https://codepen.io/anon/pen/PEpaMM?editors=1011



Related Topics



Leave a reply



Submit