How to highlight rows in v-data-table on click in Vuetify (version >= 2.0)?

Question

I use a v-data-table to manage emails. User can click on a row and a popup appears with the email details.

What I want to have:
I want to have rows marked as "readed" (so css bold/not-bold) after these rows were clicked.

Problem:
I already found some examples here (but only for older Vuetify versions): Vuetify - How to highlight row on click in v-data-table

This example (and all other examples I've found) use extended code for v-data-table - like:

<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>

So extended code is:

<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>

However since I use Vutify version 2 the

<template slot="headers" slot-scope="props"> and <template slot="items" slot-scope="props"> inside <v-data-table> seem to be ignored.

Vuetify 2 provides some new slots, but I have not yet find out how to use them for this example.

Can anyone provide an example for Vuetify >= 2.0? Believe me, there is no one for higher versions available yet - not on any development environment like CodePen or JSFiddle etc.

Answer 1

For me it workes with Vuetify 2.X by replacing the table body (v-slot:body) and define the tr and td manually. It helps to study the Slot Example.

This way it is possible to add the click event and set the css class like this:

<template v-slot:body="{ items }">
    <tbody>
      <tr v-for="item in items" :key="item.name" @click="selectItem(item)" :class="{'selectedRow': item === selectedItem}">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
</template>

(Side note: This way you can not use the event click:row on the v-data-table anymore. Because it does not get fired by overwriting the row... But defining @click directly on tr works nicely too.)

In method selectItem we save the item in a data field selectedItem.

data () {
  return {
    selectedItem: null,
    ...
  }
},
methods: {
    selectItem (item) {
      console.log('Item selected: ' + item.name)
      this.selectedItem = item
    }
}

CSS class we set when the row is clicked. So background changes and text gets bold:

<style scoped>
.selectedRow {
    background-color: red;
    font-weight: bold;
}
</style>