v-selectの中身をカスタマイズする方法

Vuetifyを使っていて、v-selectの中身を変更したい時ってありませんか？
一部強調したい文字があったり、選択させたくないものがあったり、色々あるかと思います。

この記事では、そのような要望に応えてv-selectをカスタマイズする方法を紹介します。

v-slotを利用する

<template #item="{ item }> を記述することで、追加したtemplateタグ内にv-select内のリストの中身をカスタマイズすることが可能です。

実際に使用した例

変更前のキャプチャ・コード

                <v-select
                    v-model="selectedFruitId"
                    :items="fruitList"
                    label="果物"
                    item-value="id"
                    item-text="name"
                >
                </v-select>

変更前のコードは、単純にv-selectを記載しているだけです。
ですので、表示された結果もデフォルトのレイアウトとなります。

変更後のキャプチャ・コード

                <v-select
                    v-model="selectedFruitId"
                    :items="fruitList"
                    label="果物"
                    item-value="id"
                    item-text="name"
                >
                    <template #item="{ item }">
                        <span
                            :class="{
                                'highlighted-item': item.name === 'りんご',
                            }"
                            >{{ item.name }}</span
                        >
                    </template>
                </v-select>

変更後のコードは、v-slotを使ってリストの表示をカスタマイズしています。
spanタグを使って表示するように変更し、りんごだけ文字を目立たせるようにしています。

classの条件を除けば、もちろん全てに対して適用可能です。
今回は分かりやすいように、Vueのtemplate上に「りんご」はベタ書きしています。

応用編

一つの項目だけdisableにして、アイテムを選択させないようにする方法も紹介しておきます。
v-list-item を使用して実装しました。

                <v-select
                    v-model="selectedFruitId"
                    :items="fruitList"
                    label="果物"
                    item-value="id"
                    item-text="name"
                >
                    <template #item="{ item, attrs, on }">
                        <v-list-item
                            v-bind="attrs"
                            :disabled="item.name === 'りんご'"
                            v-on="on"
                        >
                            <div>{{ item.name }}</div>
                        </v-list-item>
                    </template>
                </v-select>

まとめ

v-selectのリストの中身をカスタマイズする方法に関して、紹介しました。
行っていることとしては、v-slotを差し込んで記述を変更しているだけですので是非試してみてください！