v-selectのitem-textに画像を追加する

Vuetifyのv-selectの選択肢を画像＋文字列にする時に少しハマったのでメモ。

結論

v-selectにtemplateを追加してあげれば良い。

<v-select
  :value="selected"
  :items="itemList"
  :item-value="item => item.id"
  :item-text="item => item.name"
  @change="$emit('update:selected', $event)"
>
  <template #selection="{ item }">
    <img
      :src="item.path(画像のpath)"
      :alt="item.name"
    >
    <span>{{ item.name }}</span>
  </template>
  <template #item="{ item }">
    <img      
      :src="item.path(画像のpath)"
      :alt="item.name"
    >
    <span>{{ item.name }}</span>
  </template>
</v-select>

ドロップダウンのリストと、選択中のアイテムの表示はそれぞれ設定する必要がある。

選択した項目の画像＋文字列表示を設定

<template #selection="{ item }">

ドロップダウンリストの画像＋文字列表示を設定

<template #item="{ item }">