v-data-tableの行をハイライトする方法[vuetify]をクリックします（バージョン> = 2.0）。

Question

電子メールを管理するには、_v-data-table_を使用します。ユーザーは行をクリックすることができ、電子メールの詳細が表示されます。

私が持っていたいこと：
[。]これらの行がクリックされた後、行が「読み取りされた」（SO CSS太字/太字）としてマークされた行を記録したい。

問題：
[。]私はすでにここでいくつかの例を見つけました（ただし、古いvuetifyバージョンのみ）: vuetify - v-data-tableをクリックして行をハイライトする方法

この例（そして私が見つけた他のすべての例）は_v-data-table_のために拡張コードを使用します。

_<v-data-table :headers="headers" :items="desserts" class="elevation-1">
  <template v-slot:items="props">
    <tr @click="activerow(props.item)" :class="{'primary': props.item.id===selectedId}">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>
    </tr>
  </template>
</v-data-table>
_

そのため拡張コードは次のとおりです。

_<template v-slot:items="props">
  <tr @click="activerow(props.item)" :class="{'primary': props.item.id===selectedId}">
    <td>{{ props.item.name }}</td>
    <td class="text-xs-right">{{ props.item.calories }}</td>
    <td class="text-xs-right">{{ props.item.fat }}</td>
    <td class="text-xs-right">{{ props.item.carbs }}</td>
    <td class="text-xs-right">{{ props.item.protein }}</td>
    <td class="text-xs-right">{{ props.item.iron }}</td>
  </tr>
</template>
_

しかし、私は血管様バージョン2を使用しているので

_<template slot="headers" slot-scope="props"><template slot="items" slot-scope="props">_（somebode）_<v-data-table>_は無視されたようです。

Vuetify 2はいくつかの新しいスロットを提供しますが、この例ではそれらの使用方法を見つけていません。

誰もがvuetify> = 2.0の例を提供することができますか？私を信じて、CodepenやJSfiddleなどの開発環境ではなく、より高いバージョンが利用可能なものはありません。

Answer 1

私はこれが少し古い質問ですが、vuetifyのitem-classおよび@click:rowプロパティを使用して行を処理してカスタム行クラスを設定することができます。