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"
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
How to Get Date Value from One Date Input Field and Put It to Other Date Field Using JavaScript
How to Hide Div When You Scroll to Bottom and Show It Again When Scroll Up to Top
Trigger Event When Element Becomes Visible With Ngif
Jquery, Line Break in Textarea.. Don't Get \N and Get ↵
React Native Dynamically Change View's Background Color
React Wait Until Set State in the Same Function
How to Disable Clicking Inside Div
Javascript on Click Event for Multiple Buttons With Same Class
How to Find Previous or Next Element from Array in JavaScript
Hiding the Address Bar of a Browser (Popup)
Regex to Get String Between Curly Braces
Display Current Date in Dd/Mm/Yyyy Format
Group By, and Sum, and Generate an Object for Each Array in JavaScript
Split a String Only the At the First N Occurrences of a Delimiter
Creating a Leaderboard in Html/Js