Vuetifyを使用したv-selectの応用的な使い方について質問です。
通常のv-selectだと1段階だと思うのですが、階層増やす場合、どのような手順をふめばいいのかわからずにいます。
具体的には、
todos
配列のなかにある、ttl
が1段階目、
todos
配列のなかにある、name
が2段階目
として表示させたいです。
※サンプルコードは下のほうにあります。
下記の参考サイトをみて、item-value
と、item-text
を関連づける必要があることを理解し、1段階のところまでは、実現できました。
vue.js、vuetify ajaxで受け取ったデータをv-selectのitemに表示させたい
ただ、こちらのやり方だと、1段階のパターンしか実現できないように思います。
(下記のコードだとnameに入っている値が表示されるのみ)
item-value
と、item-text
をなしでやろうとすると、[object Object]
となってしまい、煮詰まっています。
該当のソースコード
vue
1// 下記だと、fugaか、fuga01...のどちらかしか表示できない状態です 2<v-select 3 v-model="todo" 4 item-value="ttl" 5 item-text="name" 6 :items="todos" 7> 8</v-select>
vue
1// 理想 2// v-selectのなかで、ttlとnameの値を取得し、表示させたいです 3<v-select 4 v-model="todo" 5 item-value="ttl" 6 item-text="name" 7 :items="todos" 8> 9// 出力結果のイメージ 10 <div>fuga</div> 11 <ul> 12 <li>fuga01</li> 13 <li>fuga02</li> 14 <li>fuga03</li> 15 <li>fuga04</li> 16 <li>fuga05</li> 17 </ul> 18</v-select>
js
1data() { 2 return { 3 todo: [], 4 todos: [ 5 { 6 id: 1, 7 ttl: fuga, 8 name: [ 9 fuga01 10 fuga02 11 fuga03 12 fuga04 13 fuga05 14 ] 15 }, 16 { 17 id: 2, 18 ttl: hoge, 19 name: [ 20 hoge01 21 hoge02 22 hoge03 23 hoge04 24 hoge05 25 ] 26 } 27 ] 28 } 29}
だいぶVueの知識不足なところがあり、うまく伝えられているか不安なところがありますが、
アドバイスいただけると助かります。
よろしくお願いします。
あなたの回答
tips
プレビュー