Customizing item-text in v-select

Question

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"

Answer 1

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"

Answer 2

Shorthand :

:item-text="item => item.name +' - '+ item.description"

Answer 3

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
}

Answer 4

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

Answer 5

Simplest way, no slots and minimal logic. You probably want to use item-title instead.

<v-select
   :item-title="(item)=>`${item.name}-${item.description}`"
   v-model="selectedItem"
   :items="items"/>

Answer 6

in case you don't want to deal with slots or other methods to manipulate item-text. here is another different approach to achieve the same result.

simply add a new 'displayname' key: value pair to your v-model collection on the fly with a computed method and use it as the v-model for the select and the new key as the item-text

computed: {
  addDisplayname() {
    return names.map(v => ({ ...v,
      displayname: v.name + ' - ' + v.description
    }))
  }
}

Answer 7

Vuetify 3.0.0 Update

If you decide to use a template:

in Vuetify 3.0.0 there is a breaking change, which is not yet documented. In this version the v-list-item is not generated by default. So you have to create it by yourself. You need to add it as follows:

<v-select :items="mylist" item-title="name" item-value="id">
    <template #selection="{ item }">
        <span><img :src="item.raw.image" />  {{item.raw.name}}</span>
    </template>
    <template #item="{ item, props }">
        <v-list-item v-bind="props">
            <template #title>
                <span><img :src="item.raw.image" /> {{item.raw.name}}</span>
            </template>
        </v-list-item>
    </template>
</v-select>

data () {
    return {
        mylist: [
            {id:0, image:"pic1.png", name:"Entry1"},
            {id:1, image:"pic2.png", name:"Entry2"},
            {id:2, image:"pic3.png", name:"Entry3"},
        ]
    }
}