v-slotを使用してv-selectのテキストをカスタマイズ

##概要
vuetifyのv-selectを使用する際に、item-textに複数の値を表示したいと思った...
そこで、v-slotをしようすれば実現できることがわかったのでここにまとめます。

#####v-slotを使用する

vue

<template>
<v-select
  label='題名'
  v-model='fruit'
  :items='fruits'
  item-value='fruits.id'
  item-text='fruits.name'
  return-object
>
  <!-- 　選択されたテキスト(例: id=1が選択された場合 → りんご / 100が表示される) -->
  <template v-slot:selection = "item">
    {{ item.name }} / {{ item.price }}
  </template>
  <!-- 選択一覧 -->
  <template v-slot:item = "item">
    {{ item.name }} / {{ item.price }}
  </template>
</v-select>
</template>

######scriptは下記のように設定されていると想定

typescript

<script lang="ts"> 
//インターフェース
export interface FruitInterface{
    id: string;
    name: string;
    price: string;
}

//データ
class Fruit extends Vue{
    private fruits: FruitInterface[] = [
        {
            id: "1",
            name: "りんご",
            price: "100"
        },
        {
            id: "2",
            name: "みかん",
            price: "150"
        }
    ]
}
</script>

#####選択された値をchipsで表示したい！

vue

----
  <!-- 選択されたテキスト(例: id=1が選択された場合 → りんご / 100が表示される) -->
  <template v-slot:selection = "item">
    <v-chip>{{ item.name }} / {{ item.price }}</v-chip>
  </template>
----

selectionの方にで囲めばchipで出力することができます。