Vue3 Vutify v-selectタグで作成したセレクトボックスのタイトルと値をカスタマイズする

記事を作成した際のバージョンは以下の通りです。

• Vue：3.4.27
• Vuetify：3.6.0

カスタマイズ方法

itemsに加え、item-title と item-value に、対象オブジェクトのプロパティを関連付ければOKです。

<template>
  <v-container>
    <h3>選択された値: {{ selectedOption }}</h3>
    <v-select
      v-model="selectedOption"
      :items="options"
      :item-title="options.title"
      :item-value="options.value"
      label="選択してください"
    ></v-select>
  </v-container>
</template>

<script setup>
import { ref } from 'vue'

const selectedOption = ref('')
const options = [
  { title: 'オプション 1', value: 'option1' },
  { title: 'オプション 2', value: 'option2' },
  { title: 'オプション 3', value: 'option3' }
]
</script>

上記コンポーネントを<v-app>タグ内に記述すれば、↓のようにタイトルと値が個別に設定されていることが確認できます。

公式リファレンス

↓のページに注意書きが書いてありました。。。

↓原文

When using objects for the items prop, you must associate item-title and item-value with existing properties on your objects. These values are defaulted to title and value and can be changed.

↓機械翻訳

items propにオブジェクトを使用する場合、item-titleとitem-valueをオブジェクトの既存のプロパティに関連付けなければなりません。これらの値はデフォルトで title と value に設定されており、変更することができます。

v-selectタグに設定できる他の項目が気になる人は、↓をご覧ください。

参考文献