Help us understand the problem. What is going on with this article?

[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] と表示される。
スクリーンショット 2020-06-01 16.22.39.png

解決策

vuetifyの公式ページにオブジェクト使用時の記述があった。
スクリーンショット 2020-06-01 16.43.53.png

items-textを使う

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

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

スクリーンショット 2020-06-01 16.23.15.png

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

表示
スクリーンショット 2020-06-01 16.23.15.png

スクリーンショット 2020-06-01 16.51.44.png

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

参考文献

https://vuetifyjs.com/ja/components/selects/

bbapexx
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away