選択肢をブラウザ上で選ぶときは日本語の名前から選択するけど、
選ばれたものをポストするときには、IDをapiに送信したい!

みたいな場合。

完成イメージ↓

this.operatorsの中身が、こんな感じだとする↓

表示上はID、選択肢としてはnameを表示したい。

<v-autocomplete v-model="detailSearchKey.operator" item-value="id" item-text="name" :items="operators" label="オペレーター" no-data-text="該当なし" placeholder="検索できます">
</v-autocomplete>

これでうまくいく。

v-model→inputのモデル名

:items→選択肢の全部のデータが入ったオブジェクト

item-text→表示として扱いたいオブジェクト内のキー名

item-value→値として送信したいオブジェクト内のキー名

公式によると、

items
 プロパティにオブジェクトを使用する場合、item-text
 と item-value
 をオブジェクトの既存のプロパティと関連付ける必要があります。 これらの値は text
 と value
 にデフォルトで設定されており、変更できます。
オートコンプリートコンポーネント — Vuetify

公式のv-autocompletesのページの見出し「Filter」のソースコードに実際のソースコード例が載ってる。

無制限に質問可能なプログラミングスクール!

万が一転職できない場合は、転職保障全額返金できるコースもあり!!

無制限のメンター質問対応

 

DMMウェブキャンプでプログラミングを学習しませんか?

独学より成長スピードをブーストさせましょう!

 

まずは無料相談から!

おすすめの記事