Customizing item-text in v-select

问题

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"

回答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"

回答2:

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
}

回答3:

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 slot='selection' slot-scope='{ item }'>
    {{ item.name }} - {{ item.age }}
  </template>
  <template slot='item' slot-scope='{ item }'>
    {{ item.name }} - {{ item.age }}
  </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},
    ]
  })
}   
</script>

The following is the reference: https://vuetifyjs.com/en/components/autocompletes#advanced-slots

来源：https://stackoverflow.com/questions/50531864/customizing-item-text-in-v-select

标签

vuetify.js