Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

1.1K
Visualizações
Personalización del texto del elemento en v-select

Dígame si podemos personalizar item-text para v-select .

Quiero personalizar cada elemento en v-select , algo como esto:

 :item-text="item.name - item.description"
over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

Sí, puede usar scoped slot con alcance como se describe en el documento y proporcionar una template .

Para v-select , tiene dos scoped slot :

  • selection : para describir cómo v-select debe representar los elementos cuando se seleccionan
  • item : para describir cómo v-select debería representar los elementos cuando se abren

Se parece a esto :

 <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 con un ejemplo complejo

Vuetify Doc sobre slot con alcance en V-Select


Editar para Vuetify 1.1.0+ : esas ranuras también están disponibles con los nuevos componentes v-autocomplete y v-combobox , ya que heredan de v-select .


Editar para Vue 2.6+ , reemplazar:

  • slot="selection" slot-scope="data" por v-slot:selection="data"
  • slot="item" slot-scope="data" by v-slot:item="data"
over 4 years ago · Santiago Trujillo Relatório

0

Taquigrafía:

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

0

La ranura elimina la selección automática al enfocar.

item-text tye puede ser: string | array | function

entonces podemos hacer:

 :item-text="text"

y

 methods: { text: item => item.name + ' — ' + item.description }
over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda