Nuxtで作成されたページで、リンクをクリックして画面遷移しても画面の表示が更新されない問題に遭遇した。
正確にはasyncDataが呼び出されず、dataが更新されていないような挙動になった。
原因
NuxtLinkタグで画面遷移する際、クエリ文字列の変更だけだとコンポーネントメソッド(asyncData、fetch、validate、layout など)が実行されないらしい。
解決方法
pageコンポーネントにwatchQueryプロパティを付与すると、クエリ文字列が変わるだけの場合もコンポーネントメソッド(asyncDataなど)が呼び出されるようになります。
export default {
watchQuery: ['page']
}
Webエンジニアをやっています
UX/UIデザインからプログラミング、DB設計、SEO、インフラ構築など幅広く対応してます
PHP/PHPUnit/Laravel/Vue/Nuxt/Docker/Terraform
ご連絡はTwitterのDMまで。