Personnalisation du texte de l'élément dans le v-select

Question

Veuillez me dire si nous pouvons personnaliser item-text para v-select ?

Je veux personnaliser chaque élément dans v-select quelque chose comme ça :

:item-text="item.name - item.description"

Answer 1

Oui, vous pouvez, en utilisant scoped slot comme décrit dans le doc et fournir un template .

Pour v-select vous avez deux scoped slot :

• selection : pour décrire comment v-select doit rendre les éléments lorsqu'ils sont sélectionnés
• item : pour décrire comment v-select doit rendre les éléments lorsqu'ils sont ouverts

Cela ressemble à ceci :

<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 avec un exemple complexe

Doc Vuetify à propos de l'emplacement dans V-Select

---

Éditer pour Vuetify 1.1.0+ : Ces créneaux sont également disponibles avec de nouveaux composants v-autocomplete y v-combobox comme ils héritent de v-select .

---

Modifier pour Vue 2.6+ , remplacer :

• slot="selection" slot-scope="data" par v-slot:selection="data"
• slot="item" slot-scope="data" par v-slot:item="data"

Answer 2

Abréviation de :

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

Answer 3

La fente supprime la sélection automatique lors de la mise au point.

item-text tye peut être : string | array | function

alors on peut faire :

:item-text="text"

et

methods: {
  text: item => item.name + ' — ' + item.description
}

Answer 4

Voici un exemple simple dans le code suivant :

<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>

La référence est la suivante : https://vuetifyjs.com/en/components/autocompletes#advanced-slots

Answer 5

Si vous ne voulez pas utiliser les slots ou d'autres méthodes pour manipuler le texte des éléments, voici une autre approche pour obtenir le même résultat.

il suffit d'ajouter à la volée une nouvelle paire clé/valeur 'displayname' à votre collection de v-modèles avec une méthode calculée et de l'utiliser comme v-modèle pour la sélection et la nouvelle clé comme texte de l'élément.

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