Vuetifyのv-selectの選択肢の見た目と選択済みアイテムの見た目を変更する（v-selectのスタイル変更） | Vuetify 3.x

参考にさせていただいたページ

Vuetify公式ページ

この記事執筆時点ではVuetify3の公式ドキュメントがまだ不充分だったので、以下のVuetify2の公式ドキュメントを参考にしました。

• Selectsコンポーネント: Vuetify — A Material Design Framework for Vue.js
• v-select API: Vuetify — A Material Design Framework for Vue.js

単一Vueコンポーネントのサンプルコード

以下の通り記述しました。Nuxt3の環境下でVuetify3を使用しているため、<client-only>コンポーネントを使用しています。

また、以下のサンプルコードの v-slot:selection や v-slot:item の部分がわからない方は、Vue.js公式ドキュメントの v-slot のページを参照してください。

<script setup lang="ts">
const pageName = 'index-page';
const state = reactive({
  value: -1,
});
const onClickCustomItem = (value: number) => {
  state.value = value;
};
</script>

<template>
  <div class="index-page">
    <div>{{ pageName }}</div>

    <client-only>
      <v-select
        v-model="state.value"
        :items="[
          { id: -1, name: '選択してください', value: -1 },
          { id: 1, name: 'name1', value: 1 },
          { id: 2, name: 'name2', value: 2 },
        ]"
        item-title="name"
      >
        <template v-slot:selection="{ item }">
          <div class="selected-view">
            選択されたアイテム: {{ item.value }}: {{ item.title }}
          </div>
        </template>
        <template v-slot:item="{ item }">
          <div
            class="custom-item-view"
            @click="onClickCustomItem(item.value)"
          >
            カスタムアイテム: {{ item.title }}
          </div>
        </template>
      </v-select>
    </client-only>
  </div>
</template>

<style scoped lang="scss">
.index-page {
  font-size: 16px;
}

.selected-view {
  color: #ff0000;
}

.custom-item-view {
  color: #339933;
}
</style>