質問: Nuxt.jsでなにか診断アプリの作成の練習にと思い 【Vue.js】スプラトゥーン2 おすすめブキ診断をパワーアップさせた【Part2】 - Qiita こちらを参考に作成してみました。 上記のコードをそのままのvue.jsで使用するぶんにはとくに問題なかったのですが、 nuxt内の.vueファイルで使用できるように下記のように書き換えしてみまたところエラーがでました。 ``` ``` 診断をポチポチ行っていくと、結果の画面で ![画像の説明をここに入力](https://i.stack.imgur.com/3x8XK.png) という内容のエラー画面になります。 ``` maxCount is not defined An error occurred while rendering the page. Check developer tools console for details. ``` consoleを開いたときのエラーの内容です。 ``` client.js?06a0:77 ReferenceError: maxCount is not defined at VueComponent.clickAnswer (shindan01.vue?5423:59) at click (shindan01.vue?840f:17) at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854) at HTMLAnchorElement.invoker (vue.runtime.esm.js?2b0e:2179) at HTMLAnchorElement.original._wrapper (vue.runtime.esm.js?2b0e:6917) ``` maxCountの変数は宣言しているはずなのにないと言われているようです。 普通のHTML と Javascriptにvue.jsを書いたらエラーがおこらないのになぜ.vueファイル(Nuxt)にするとエラーが出るのでしょうか? このエラーの解決法をさがしております。 開発環境は * os: macos catalina * node: v12.14.0 * npm: 6.13.4 * nuxt: 2.0.0 * vue: 2.6.11 です。 他に必要な情報がありましたら記入していきます。
回答: `maxCount = 0`を`let maxCount = 0`に変更してみてはいかがでしょうか。`maxWeapon`も同様です。 参考記事はJavaScriptで書かれているので本来ローカル変数として`var`をつけて(Vueの場合は`let`)宣言するべきところを、何もつけないでグローバル変数として宣言してもエラーがでない場合がありますが、Nuxtの場合は1度コンパイルしてJavaScriptを生成するためエラーがでたのではないかと思います。 続編ではその部分修正されていますね。