vuetifyのv-data-tableのデータをクリック時、動的に詳細ページに飛ぶようにしたい

前提・実現したいこと

発生している問題・エラーメッセージ

クリック時に$router.pushを使用し、copmponentを呼び出しているが"/music-reference/key/undefined"と表示されてしまう
理想はkeysのCをクリック時はCの詳細ページへ飛ばし、"/music-reference/key/c"としたい

該当のソースコード

<v-data-table
class="pointer"
:headers="headers"
:items="keys"
:search="search"
:items-per-page="60"
@click:row="

  (data) => {
    // 無理くりここで画面遷移させる
    $router.push({ path: `/music-reference/key/${keys.tonic}`})
  }
">
</v-data-table>

<template>
<v-app>
  <v-card>
    <v-card-title>
      Key
    </v-card-title>
    <v-container fluid>
      <v-row>
        <v-col cols="6" md="2">
        <v-checkbox
                v-model="selection"
                label="Major"
                color="primary"
                value="Major"
                hide-details
              ></v-checkbox>
        </v-col>
        <v-col cols="6" md="2">
        <v-checkbox
                v-model="selection"
                label="Natural Minor"
                color="primary"
                value="Natural Minor"
                hide-details
              ></v-checkbox>
        </v-col>
        <v-col cols="6" md="2">
        <v-checkbox
                v-model="selection"
                label="Harmonic Minor"
                color="primary"
                value="Harmonic Minor"
                hide-details
              ></v-checkbox>
        </v-col>
        <v-col cols="6" md="2">
        <v-checkbox
                v-model="search"
                label="Melodic Minor"
                color="primary"
                value="Melodic Minor"
                hide-details
              ></v-checkbox>
        </v-col>
      </v-row>
      <!-- <v-spacer></v-spacer> -->
      <v-col cols="6" md="8">
      <v-text-field
        v-model="search"
        append-icon="mdi-magnify"
        label="Search"
        single-line
        hide-details
      ></v-text-field>
      </v-col>
    <v-data-table
      class="pointer"
      :headers="headers"
      :items="keys"
      :search="search"
      :items-per-page="60"
      @click:row="
      
      (data) => {
        // 無理くりここで画面遷移させる
        $router.push({ path: `/music-reference/key/${keys.tonic}`})
      }
    ">
    </v-data-table>
    
    </v-container>
  </v-card>
  </v-app>
</template>

<script>
  export default {
    data () {
      return {
        ex4: ['red', 'indigo', 'orange', 'primary', 'secondary', 'success', 'info', 'warning', 'error', 'red darken-3', 'indigo darken-3', 'orange darken-3'],
      }
    },
    data () {
      return {
        search: '',
        selectionType: 'independent',
        selection: [],

        headers: [
          { text: 'Tonic', value: 'tonic' },
          // { text: 'Key', value: 'Key' },
          { text: 'Key', value: 'key', filterable: false }
        ],
        keys: [
          { tonic: 'C', key: 'Major'},
          { tonic: 'G', key: 'Major'},
          { tonic: 'D', key: 'Major'},
          { tonic: 'A', key: 'Major'},
          { tonic: 'E', key: 'Major'},
          { tonic: 'B', key: 'Major'},
          { tonic: 'F#', key: 'Major'},
          { tonic: 'C#', key: 'Major'},
          { tonic: 'F', key: 'Major'},
          { tonic: 'Bb', key: 'Major'},
          { tonic: 'Eb', key: 'Major'},
          { tonic: 'Ab', key: 'Major'},
          { tonic: 'Db', key: 'Major'},
          { tonic: 'Gb', key: 'Major'},
          { tonic: 'Cb', key: 'Major'},
          { tonic: 'A', key: 'Natural Minor'},
          { tonic: 'E', key: 'Natural Minor'},
          { tonic: 'B', key: 'Natural Minor'},
          { tonic: 'F#', key: 'Natural Minor'},
          { tonic: 'C#', key: 'Natural Minor'},
          { tonic: 'G#', key: 'Natural Minor'},
          { tonic: 'D#', key: 'Natural Minor'},
          { tonic: 'A#', key: 'Natural Minor'},
          { tonic: 'D', key: 'Natural Minor'},
          { tonic: 'G', key: 'Natural Minor'},
          { tonic: 'C', key: 'Natural Minor'},
          { tonic: 'F', key: 'Natural Minor'},
          { tonic: 'Bb', key: 'Natural Minor'},
          { tonic: 'Eb', key: 'Natural Minor'},
          { tonic: 'Ab', key: 'Natural Minor'},
          { tonic: 'A', key: 'Harmonic Minor'},
          { tonic: 'E', key: 'Harmonic Minor'},
          { tonic: 'B', key: 'Harmonic Minor'},
          { tonic: 'F#', key: 'Harmonic Minor'},
          { tonic: 'C#', key: 'Harmonic Minor'},
          { tonic: 'G#', key: 'Harmonic Minor'},
          { tonic: 'D#', key: 'Harmonic Minor'},
          { tonic: 'A#', key: 'Harmonic Minor'},
          { tonic: 'D', key: 'Harmonic Minor'},
          { tonic: 'G', key: 'Harmonic Minor'},
          { tonic: 'C', key: 'Harmonic Minor'},
          { tonic: 'F', key: 'Harmonic Minor'},
          { tonic: 'Bb', key: 'Harmonic Minor'},
          { tonic: 'Eb', key: 'Harmonic Minor'},
          { tonic: 'Ab', key: 'Harmonic Minor'},
          { tonic: 'A', key: 'Melodic Minor'},
          { tonic: 'E', key: 'Melodic Minor'},
          { tonic: 'B', key: 'Melodic Minor'},
          { tonic: 'F#', key: 'Melodic Minor'},
          { tonic: 'C#', key: 'Melodic Minor'},
          { tonic: 'G#', key: 'Melodic Minor'},
          { tonic: 'D#', key: 'Melodic Minor'},
          { tonic: 'A#', key: 'Melodic Minor'},
          { tonic: 'D', key: 'Melodic Minor'},
          { tonic: 'G', key: 'Melodic Minor'},
          { tonic: 'C', key: 'Melodic Minor'},
          { tonic: 'F', key: 'Melodic Minor'},
          { tonic: 'Bb', key: 'Melodic Minor'},
          { tonic: 'Eb', key: 'Melodic Minor'},
          { tonic: 'Ab', key: 'Melodic Minor'}
      ],
      }
    },
  }
</script>

<style lang="css">
  .pointer:hover {
    cursor: pointer;
  }
</style>

行動規範の内容に同意します

回答1件

ベストアンサー

<v-data-table>の @click:row eventには対象のrowのdataが含まれるので、keysを参照するのではなく、dataの内容を参照して、次のようにするとよいと思います。

html
1    <v-data-table
2      class="pointer"
3      :headers="headers"
4      :items="keys"
5      :search="search"
6      :items-per-page="60"
7      @click:row="
8
9      (data) => {
10        // keys.tonicではなく、data.tonicを参照
11        $router.push({ path: `/music-reference/key/${data.tonic}`})
12      }
13    ">
14    </v-data-table>