web-dev-qa-db-ja.com

Vuejs Vuetify v-selectでオブジェクトのプロパティにアクセスする方法

私の使用例。

  1. オブジェクトの配列をバックエンドAPIから取得しました。
  2. これらのオブジェクトをv-selectでレンダリングしたい

これは私のコードです。

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

しかし、それは私に出力を与えます。

enter image description here

しかし、オブジェクト名プロパティをに表示したいのですが、v-select

バニラVue.jsでこれを行います

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

しかし、ここではvuetifyを使用してこれを行うことはできません。

:items="categories.name"

Vuetifyのドキュメント

オブジェクトの配列または文字列の配列を指定できます。オブジェクトを使用する場合、テキストと値のフィールドを探します。これは、item-textおよびitem-valueプロパティを使用して変更できます。

item-textおよびitem-valueの実際の意味item-textを使用してこれを実現するには

vue.jsvuejs2vuetify.js
14
Pathum Kalhan

カテゴリにはname属性があり、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