web-dev-qa-db-fra.com

Vuejs Vuetify comment accéder aux propriétés de l'objet dans v-select

Mon cas d'utilisation.

  1. J'ai obtenu un tableau d'objets à partir d'une API principale.
  2. Je veux rendre ces objets dans un v-select

Ceci est mon code.

<v-select
  :items="categories"
  name="category"
  label="Select a category"
  v-model="category"
  v-validate="'required'">
</v-select>

Mais ça me donne la sortie.

enter image description here

Mais je souhaite que la propriété du nom des objets soit affichée dans le v-select

Nous le ferions dans Vanilla Vue.js

<li v-for="cat in categories" :key="cat.name">{{cat.name}}</li>

Mais ici, avec vuetify, nous ne pouvons pas faire cela.

:items="categories.name"

Documentation de Vuetify

Peut être un tableau d'objets ou un tableau de chaînes. Lors de l'utilisation d'objets, recherchera un champ de texte et de valeur. Cela peut être modifié en utilisant les accessoires item-text et item-value.

Ce qu'ils entendent par item-text et item-value Comment y parvenir en utilisant item-text

vue.jsvuejs2vuetify.js
14
Pathum Kalhan

Votre catégorie a l'attribut name, vous pouvez passer à item-text:

<v-select
  :items="categories"
  name="category"
  label="Select a category"
  v-model="category"
  v-validate="'required'"
  item-text="name"
  ></v-select>
37
ittus