選択肢をブラウザ上で選ぶときは日本語の名前から選択するけど、
選ばれたものをポストするときには、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」のソースコードに実際のソースコード例が載ってる。
