

Nuxt.jsでなにか診断アプリの作成の練習にと思い

[【Vue.js】スプラトゥーン2 おすすめブキ診断をパワーアップさせた【Part2】 -
Qiita](https://qiita.com/Sinhalite/items/f4fa3cd38d413541713a)

こちらを参考に作成してみました。

上記のコードをそのままのvue.jsで使用するぶんにはとくに問題なかったのですが、

nuxt内の.vueファイルで使用できるように下記のように書き換えしてみまたところエラーがでました。

[code]

    <template lang="pug">
    #app
      h1 スプラトゥーン2 武器診断
      h2
        | {{ message }}
      #choice(v-if='choice')
        a.square_btn.yes(href='#' v-on:click="clickAnswer('Yes')") はい
        a.square_btn.no(href='#' v-on:click="clickAnswer('No')") いいえ
      #retry(v-if='retry_btn')
        a.square_btn.yes(href='#' v-on:click='retry') リトライする
    </template>
    
    <script>
    var counter;
    var quetions;
    var weapons;
    init();
    
    function init() {
      counter = 0;
      quetions = [
        "エイムには自信がある",
        "キルよりも塗りのほうが好きだ",
        "かくれんぼが得意だ",
        "ガンガン前に突っ込むのが好きだ",
        "機動力が高い武器が好きだ",
        "トリッキーな武器が好きだ"
      ];
      weapons = {
        'スプラシューターコラボ':0,
        'N-ZAP85':0,
        'ジェットスイーパーカスタム':0,
        'デュアルスイーパーカスタム':0,
        'スプラマニューバーコラボ':0,
        'スプラチャージャー':0,
        'ホットブラスターカスタム':0,
        'スプラローラー':0,
        'パブロ':0,
        'バケットスロッシャーデコ':0,
        'バレルスピナー':0,
        'パラシェルター':0
      }
    }
    
    export default {
      data() {
        return {
          choice: true,
          retry_btn: false,
          message: quetions[0]
        }
      },
      methods: {
        clickAnswer: function (answer) {
          addPoint(answer,counter);
          counter += 1;
          if(counter > quetions.length-1){
            maxCount = 0
            maxWeapon = ""
            for(weapon in weapons){
              if(maxCount < weapons[weapon]){
                maxCount = weapons[weapon];
                maxWeapon = weapon;
              }
            }
            this.message = "あなたには「" + maxWeapon + "」がオススメです！";
            this.choice = false;
            this.retry_btn = true;
          } else {
            this.message = quetions[counter];
          }
        },
        retry: function () {
          init();
          this.message = quetions[counter];
          this.choice = true;
          this.retry_btn = false;
        }
      }
    };
    
    function addPoint(answer,counter) {
      switch(counter){
        case 0:
          if(answer == 'Yes'){
            weapons['スプラシューターコラボ'] += 1;
            weapons['N-ZAP85'] += 1;
            weapons['ジェットスイーパーカスタム'] += 1;
            weapons['デュアルスイーパーカスタム'] += 1;
            weapons['スプラマニューバーコラボ'] += 1;
            weapons['スプラチャージャー'] += 1;
            weapons['バレルスピナー'] += 1;
          }else{
            weapons['ホットブラスターカスタム'] += 1;
            weapons['スプラローラー'] += 1;
            weapons['パブロ'] += 1;
            weapons['バケットスロッシャーデコ'] += 1;
            weapons['バレルスピナー'] += 1;
            weapons['パラシェルター'] += 1;
          }
          break;
        case 1:
          if(answer == 'Yes'){
            weapons['N-ZAP85'] += 1;
            weapons['デュアルスイーパーカスタム'] += 1;
            weapons['バレルスピナー'] += 1;
            weapons['バケットスロッシャーデコ'] += 1;
          }else{
            weapons['スプラシューターコラボ'] += 1;
            weapons['ジェットスイーパーカスタム'] += 1;
            weapons['ホットブラスターカスタム'] += 1;
            weapons['スプラローラー'] += 1;
            weapons['パブロ'] += 1;
            weapons['パラシェルター'] += 1;
            weapons['スプラマニューバーコラボ'] += 1;
            weapons['スプラチャージャー'] += 1;
          }
          break;
        case 2:
          if(answer == 'Yes'){
            weapons['スプラローラー'] += 1;
            weapons['パブロ'] += 1;
          }else{
            weapons['ジェットスイーパーカスタム'] += 1;
            weapons['バレルスピナー'] += 1;
            weapons['スプラチャージャー'] += 1;
          }
          break;
        case 3:
          if(answer == 'Yes'){
            weapons['スプラローラー'] += 1;
            weapons['パブロ'] += 1;
            weapons['バケットスロッシャーデコ'] += 1;
            weapons['ホットブラスターカスタム'] += 1;
            weapons['スプラシューターコラボ'] += 1;
            weapons['パラシェルター'] += 1;
            weapons['スプラマニューバーコラボ'] += 1;
          }else{
            weapons['N-ZAP85'] += 1;
            weapons['デュアルスイーパーカスタム'] += 1;
            weapons['ジェットスイーパーカスタム'] += 1;
            weapons['バレルスピナー'] += 1;
            weapons['スプラチャージャー'] += 1;
          }
          break;
        case 4:
          if(answer == 'Yes'){
            weapons['スプラローラー'] += 1;
            weapons['パブロ'] += 1;
            weapons['N-ZAP85'] += 1;
            weapons['スプラシューターコラボ'] += 1;
            weapons['スプラマニューバーコラボ'] += 1;
          }else{
            weapons['ホットブラスターカスタム'] += 1;
            weapons['バケットスロッシャーデコ'] += 1;
            weapons['ジェットスイーパーカスタム'] += 1;
            weapons['バレルスピナー'] += 1;
            weapons['スプラチャージャー'] += 1;
          }
          break;
        case 5:
          if(answer == 'Yes'){
            weapons['パラシェルター'] += 1;
            weapons['パブロ'] += 1;
            weapons['スプラチャージャー'] += 1;
          }else{
          }
          break;
      }
    }
    
    </script>
    
[/code]

診断をポチポチ行っていくと、結果の画面で

[![画像の説明をここに入力](https://i.stack.imgur.com/3x8XK.png)](https://i.stack.imgur.com/3x8XK.png)

という内容のエラー画面になります。

[code]

    maxCount is not defined
    An error occurred while rendering the page. Check developer tools console for details.
    
[/code]

consoleを開いたときのエラーの内容です。

[code]

    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)
    
[/code]

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

です。  
他に必要な情報がありましたら記入していきます。


CC BY-SA 4.0
2020-01-26T03:14:23.017
62554
2022-07-26T15:07:50.650
2020-01-26T03:44:45.203
32986
36967
question
javascript vue.js nuxt.js
Nuxtでの「is not defined」の解決方法を探しています。


`maxCount = 0`を`let maxCount = 0`に変更してみてはいかがでしょうか。`maxWeapon`も同様です。  
参考記事はJavaScriptで書かれているので本来ローカル変数として`var`をつけて(Vueの場合は`let`)宣言するべきところを、何もつけないでグローバル変数として宣言してもエラーがでない場合がありますが、Nuxtの場合は1度コンパイルしてJavaScriptを生成するためエラーがでたのではないかと思います。

続編ではその部分修正されていますね。  
<https://qiita.com/Sinhalite/items/b294629f8f6edab4e657>


CC BY-SA 4.0
2020-02-21T10:56:48.010
63236
2020-02-21T10:56:48.010
7232
62554
answer