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
です。
他に必要な情報がありましたら記入していきます。