質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3957閲覧

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

yujin1114

総合スコア1

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/10/15 13:19

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

参考: https://vuetifyjs.com/en/api/v-data-table/#events

投稿2020/10/31 05:18

DaikiOjima

総合スコア271

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問