Vue.js / Nuxt.js

【Nuxt.js】画面遷移時にハンバーガーメニューを閉じたい

  • 基本的にVueではモーダルメニューなどはdataの値で表示・非表示を切り替える
<template>
    <div>
        <!-- メニュー表示ボタン -->
        <button type="button"
                :class="{ open: isShowMenu }"
                @click.stop="isShowMenu = !isShowMenu">
            メニュー
        </button>
        <div v-show="isShowMenu">
            <!-- メニュー内容 -->
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isShowMenu: false
        };
    },
}
</script>

ここでルータで画面遷移を行なった際にメニューが表示されたままになるという問題発生

watchで解決する

  • 下記のようにwatchオプションを記載してあげると毎回画面遷移の度にメニューを閉じることができる
 watch: {
        '$route' () {
            this.isShowMenu = false;
        }
    }

\ 案件のご依頼・ご相談はこちらから /