Vuetify2.0系のdatatableで行クリックを実装する

背景

Vuetifyで行クリックを実装させたいが1.0系とは勝手が違ったので備忘録がてらのメモです。

解法

<template>
 <v-data-table
    :headers="header"
    :items="data"
    :expanded.sync="expanded"
    item-key="id"
    show-expand
    // @click:rowに関数を渡す
    @click:row="onClickEvent" 
  />
</template>
<script>
export default {
  name: 'App',
  computed: {},
  mounted() {},
  methods: {
    // 第一引数にクリックした行のObjectが渡されるので処理を用意しておく
    onClickEvent(data) {
      console.log(data)
    },
}
</script>

余談

メゾット書かずに遷移させたい

  <v-data-table
    :headers="header"
    :items="data"
    :expanded.sync="expanded"
    item-key="id"
    show-expand
    widths="100%"
    calculate-widths
    @click:row="
      (data) => {
        // 無理くりここで画面遷移させる
        $router.push(`/projects/${data.id}`)
      }
    "
  >