前提・実現したいこと
最近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>
補足情報
一回目は問題なく動作し、リロードしても問題なく動作します。
ただ、ページ遷移後だけ上手く動作しません。
お知恵をお借りできると嬉しいです。
回答1件
あなたの回答
tips
プレビュー