[Vuetify] v-selectで[object, object] と表示された時の解決法

現象

items: [{id:1, text: 'テキスト'},{id:2, text: 'テキスト2'},{id:3, text: 'テキスト3'}]

上記のようなオブジェクトの配列をv-selectで表示。

<v-select
 :items="items"
/>

すると以下のように [object, object] と表示される。

解決策

vuetifyの公式ページにオブジェクト使用時の記述があった。

items-textを使う

item-text="オブジェクトのプロパティ名"使うことで解決

<v-select
 item-text="text"
 :items="items"
/>

items-valueも使って値の指定を行う

あくまで表示はできたが、フィルタリングする時など、表示と裏で保持する値をそれぞれ分けたい場合は、 items-value を使う。

実際に値を確認するために、 @change="changedValue" を追記し、select選択時にconsole.logで値を出力する。

<v-select
 item-text="text"
 item-value="id"
 :items="items"
 @change="changedValue"
/>

methods: {
 changedValue(value) {
  console.log('value', value)
 }
}

表示

値

無事、表示と値を分けることができたので解決。

参考文献