Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

1.1K
Vistas
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"
over 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

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"
over 4 years ago · Santiago Trujillo Denunciar

0

Shorthand :

:item-text="item => item.name +' - '+ item.description"
over 4 years ago · Santiago Trujillo Denunciar

0

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
}
over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda