【Vue.js】Vuetifyのv-data-tableで行クリックとチェックボックスの連動

概要

以下、Vue.jsのUIライブラリであるVuetifyの話です。
v-data-tableにチェックボックスを表示しつつ、行のクリックをチェックボックスも連動させたかったときのメモです。

方法

<template>
  <v-data-table
    v-model="selected"
    :headers="headers"
    :items="items"
    item-key="id"
    show-select
  >
    <template v-slot:item="{ item, isSelected, select }">
      <tr :class="[{'v-data-table__selected': isSelected}]" @click="select(!isSelected)">
        <td>
          <v-simple-checkbox :value="isSelected" @input="select($event)" />
        </td>
        <td v-for="header in headers" :key="header.value">
          {{ item[header.value] }}
        </td>
      </tr>
    </template>
  </v-data-table>
</template>

v-data-tableのv-slotのうち、テーブルのデータにクリックを仕込めそうなのはbody, item, item.<name>あたりに見えると思います。
ただこのうち「行」の選択済み情報を持っているのは itemのみです。
itemの isSelectedがそれに該当します。
そしてitemの selectという選択のためのファンクションも持っていますのでこれを使います。

<tr @click="select(!isSelected)" >

この部分が本稿の全てです。
trタグに@clickを書けばクリックイベントが仕込めることはVue.jsを勉強したらお分かりかと思います。
v-slotのselectは直感的でチェックをつけたければtrueを、外したければfalseを渡してあげればいい形です。
v-slotには行が選択されているかの情報であるisSelectedがありますので、それを逆にして渡してあげればいいと、となります。
これで、行をクリックしたときにもチェックボックスにチェックがつきます。

蛇足

以下は失敗談です。

<v-simple-checkbox :value="isSelected" @input="select($event)" />

チェックボックスの部分の上記のソースですが、これは公式のslotのサンプルのitem.data-table-selectの部分でも記載されているものと同一です。
この部分を参考に、最初は@inputの右辺をそのまま

に仕込んでいました。

<tr @click="select($event)" >

ただこれは動きませんのでご注意ください･･･。