0

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

【Vue.js】スプラトゥーン2 おすすめブキ診断をパワーアップさせた【Part2】 - Qiita

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

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

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

<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>

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

画像の説明をここに入力

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

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

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

1 件の回答 1

1

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。