Vuetifyのv-selectにてitemsのキーがtextとvalueじゃないときの対処法

はじめに

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

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

itemsにtextとvalueがないときの設定に迷ったので、備忘録を兼ねてメモを残します

対処法

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

{
  [
    { categoryName: "カテゴリ1", id: 1 },
    { categoryName: "カテゴリ2", id: 2 },
    { categoryName: "カテゴリ3", id: 3 },
    { categoryName: "カテゴリ4", id: 4 }
  ]
}

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

• text : categoryName
• value : id

<v-select
  v-model="id"
  label="*カテゴリ名"
  :items="categories"
  item-text="categoryName"
  item-value="id"
  required>
</v-select>

参考

Select component