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

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

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

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuetify.js

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

Q&A

解決済

1回答

3003閲覧

Vuetify(Vue.js)で2回目移行のクリックイベントが発生しない

chef

総合スコア15

Vue.js

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuetify.js

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

0グッド

0クリップ

投稿2019/05/31 08:01

前提・実現したいこと

最近Vue.jsに触れました。初心者です。
フレームワークにVuetify(Nuxt.js)を使っていてほぼ想定したように構築できたのですが、ボタンの処理について質問があります。

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

モバイル画面でheaderの中のツールバーの中にハンバーガーメニューを表示しているのですが、ページ遷移後(2回目移行)にクリックイベントがきかなくなります。

参考にしたコード→https://codepen.io/kematzy/pen/oMgrjE

使用したコンポーネント→https://vuetifyjs.com/ja/components/toolbars

デベロッパーツールを確認する限り、クリックイベントが効かなくなるというより、クリックイベントによって表示されるメニューがページを遷移すると消えているという感じです。

該当のソースコード

以下のコードをTheHeader.vueファイルに記述して、それをコアファイルで読み込んでいます。

<template> <v-toolbar> <v-toolbar-title> <v-btn flat to="/">TOP</v-btn> </v-toolbar-title> <v-spacer></v-spacer> <v-toolbar-items class="hidden-sm-and-down"> <v-btn v-for="item in menu" :key="item" :to="item.href" flat> {{ item.title }} </v-btn> </v-toolbar-items> <v-menu class="hidden-md-and-up"> <v-toolbar-side-icon slot="activator"></v-toolbar-side-icon> <v-list> <v-list-tile v-for="item in menu" :key="item" :to="item.href"> <v-list-tile-content> <v-list-tile-title>{{ item.title }}</v-list-tile-title> </v-list-tile-content> </v-list-tile> </v-list> </v-menu> </v-toolbar> </template> <script> export default { data: () => ({ menu: [ { href: 'link1', title: 'リンク1' }, { href: 'link2', title: 'リンク2' }, { href: 'link3', title: 'リンク3' } ] }) } </script>

補足情報

一回目は問題なく動作し、リロードしても問題なく動作します。

ただ、ページ遷移後だけ上手く動作しません。

お知恵をお借りできると嬉しいです。

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

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

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

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

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

yasutomi

2019/05/31 09:17

あなたが記述したコードをCodePenに保存して リンクを共有していただきたいです。 参考にされたコードと比べコードがだいぶ変わっています。
chef

2019/05/31 10:20

ご回答いただき誠にありがとうございます。 ご意見をいただき対応している過程で原因と解決策がわかりました。
guest

回答1

0

自己解決

処理部分が<v-app>タグで囲まれていないことが原因のようでした。
layouts/default.vue(コアのファイル)にて全体を<v-app>で囲んだところ上手く動きました。

投稿2019/05/31 10:23

chef

総合スコア15

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問