Nuxtの共通レイアウトにグローバルメニューを設定したが、リアクティブにならない件

最終更新日:2020年3月23日 Nuxt

Nuxtのlayoutsフォルダのdefault.vueにグローバルメニューを設定して、ユーザのログイン有無により、表示するメニューを切り替えようとしたが、うまくいかなかった。

上のように、v-if=”checkUser”で表示するメニューを決定する。

最初はstateのisLoginUser=falseに設定しておき、ログインした際にtrueに変更して永続化させる。(ログアウト時はfalseに戻して永続化)

このとき、本来であればuserFlagもfalseからtrueにリアクティブに変わるはずであるが、falseのままになってしまう。

そのため、ログイン時もログアウト時も常にダッシュボード等のメニューが表示されない。

 

そこで、default.vueでglobal-navi.vueを読み込むのではなく、各ページで読み込むようにした。

そうしたらグローバルメニューは想定通りにリアクティブに切り替わるようになった。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です