Vuetifyのv-selectにてtextの値をカスタマイズする方法

はじめに

Vuetifyのv-selectでは、デフォルトのitemsの仕様は以下となっています

{
  text: string | number | object
  value: string | number | object
}

textの値をバインディングしたオブジェクトから値を取り出した後、加工して設定します

対処法

itemsとして、以下のオブジェクトを使用する場合のコード例です

{
  [
    { id: 1, lastName: "test", firstName: "taro" },
    { id: 2, lastName: "test", firstName: "jiro" },
    { id: 3, lastName: "test", firstName: "saburo" },
    { id: 4, lastName: "test", firstName: "shiro" },
  ]
}

textにfirstName + lastName、valueにidを使用する場合、v-selectのitem-valueとitems-textにitemsの対応するキーを指定します。ここでは以下のようにします

• value : id
• text : firstName + lastName

<v-select
  v-model="id"
  label="*氏名"
  :items="items"
  item-value="id"
  :item-text="item => item.lastName + ' ' + item.firstName"
  required>
</v-select>

参考

Customizing item-text in v-select