v-slotの値で変数を使って動的に扱う方法

v-slotとは

スロット — Vue.js

やりたいこと

v-slotの値を動的に扱いたい。

例えばVuetifyのDataTableで v-slotを使うサンプルで、

Data table component — Vuetify

<template v-slot:item.calories="{ item }">
  <v-chip
    :color="getColor(item.calories)"
    dark
  >
    {{ item.calories }}
  </v-chip>
</template>

item.calories を動的にしたい場合です。

やり方

スロット — Vue.js

vueの2.6.0から対応されていて、 [] で値を囲めば良いです。

先の例だと、

<template v-slot:[`item.${someVar}`]="{ item }">
  <v-chip
    :color="getColor(item.calories)"
    dark
  >
    {{ item.calories }}
  </v-chip>
</template>

という事です。

他にも v-forと組み合わせて

<template v-for="one in array" v-slot:[`item.${one}`]="{ value }">
  {{ value.hoge }}
</template>

というのもできます。tableの列が増減するようなパターンで使えます。