I thought it was a practice to create a diagnostic app at Nxt.js.
[Vue.js] Splatoon 2 Power Up Recommended Book Diagnostics [Part 2] -Qiita
I made it by referring to this.
There was no problem using the above code in vue.js as it is, but
I tried rewriting the .vue file in nuxt as below and got an error.
<template lang="pug">
#app
h1 Splatoon 2 Arms Diagnostics
h2
| {{message}}
#choice(v-if='choice')
a.square_btn.yes(href='#'v-on:click="clickAnswer('Yes')") Yes
a.square_btn.no(href='#'v-on:click="clickAnswer('No')")No
# retry(v-if='retry_btn')
a.quare_btn.yes(href='#'v-on:click='retry') retry
</template>
<script>
var counter;
variations;
var Weapons;
init();
function init() {
counter = 0;
quetions = [
"I'm confident in A.M."
"I prefer paint to kill",
"I'm good at hide-and-seek,"
"I like to stick in front of you".
"I like weapons with high mobility",
"I like tricky weapons".
];
Weapons = {
'Splashooter Colabo': 0,
'N-ZAP85': 0,
'Jet Sweeper Custom': 0,
'Dual Sweeper Custom': 0,
'Spramanubar collaboration': 0,
'Splatcher': 0,
'Hot Blaster Custom': 0,
'Spla Roller': 0,
'Pablo': 0,
'Bucket Slosher Deco': 0,
'Barrel spinner': 0,
'Parashelter': 0
}
}
export default {
data(){
US>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+"" is recommended for you!"";
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){
case0:
if(answer=='Yes'){
Weapons ['Splashooter Colabo'] + = 1;
Weapons ['N-ZAP85'] + = 1;
Weapons ['Jet Sweeper Custom'] + = 1;
Weapons ['Dual Sweeper Custom'] + = 1;
Weapons ['Spramanuber Collaboration'] +=1;
Weapons ['Splatcher'] + = 1;
weapons ['barrel spinner'] + = 1;
} else {
Weapons ['Hot Blaster Custom'] +=1;
Weapons ['Spra Roller'] + = 1;
Weapons ['Pablo'] + = 1;
Weapons ['Bucket Slosher Deco'] + = 1;
weapons ['barrel spinner'] + = 1;
Weapons ['Parashelter'] + = 1;
}
break;
case1:
if(answer=='Yes'){
Weapons ['N-ZAP85'] + = 1;
Weapons ['Dual Sweeper Custom'] + = 1;
weapons ['barrel spinner'] + = 1;
Weapons ['Bucket Slosher Deco'] + = 1;
} else {
Weapons ['Splashooter Colabo'] + = 1;
Weapons ['Jet Sweeper Custom'] + = 1;
Weapons ['Hot Blaster Custom'] +=1;
Weapons ['Spra Roller'] + = 1;
Weapons ['Pablo'] + = 1;
Weapons ['Parashelter'] + = 1;
Weapons ['Spramanuber Collaboration'] +=1;
Weapons ['Splatcher'] + = 1;
}
break;
case2:
if(answer=='Yes'){
Weapons ['Spra Roller'] + = 1;
Weapons ['Pablo'] + = 1;
} else {
Weapons ['Jet Sweeper Custom'] + = 1;
weapons ['barrel spinner'] + = 1;
Weapons ['Splatcher'] + = 1;
}
break;
case3:
if(answer=='Yes'){
Weapons ['Spra Roller'] + = 1;
Weapons ['Pablo'] + = 1;
Weapons ['Bucket Slosher Deco'] + = 1;
Weapons ['Hot Blaster Custom'] +=1;
Weapons ['Splashooter Colabo'] + = 1;
Weapons ['Parashelter'] + = 1;
Weapons ['Spramanuber Collaboration'] +=1;
} else {
Weapons ['N-ZAP85'] + = 1;
Weapons ['Dual Sweeper Custom'] + = 1;
Weapons ['Jet Sweeper Custom'] + = 1;
weapons ['barrel spinner'] + = 1;
Weapons ['Splatcher'] + = 1;
}
break;
case4:
if(answer=='Yes'){
Weapons ['Spra Roller'] + = 1;
Weapons ['Pablo'] + = 1;
Weapons ['N-ZAP85'] + = 1;
Weapons ['Splashooter Colabo'] + = 1;
Weapons ['Spramanuber Collaboration'] +=1;
} else {
Weapons ['Hot Blaster Custom'] +=1;
Weapons ['Bucket Slosher Deco'] + = 1;
Weapons ['Jet Sweeper Custom'] + = 1;
weapons ['barrel spinner'] + = 1;
Weapons ['Splatcher'] + = 1;
}
break;
case5:
if(answer=='Yes'){
Weapons ['Parashelter'] + = 1;
Weapons ['Pablo'] + = 1;
Weapons ['Splatcher'] + = 1;
} else {
}
break;
}
}
</script>
If you go through the diagnosis little by little, you'll see the results on the screen.
The error screen appears.
maxCount is not defined
Error occurred while rendering the page. Check developer tools console for details.
Contents of the error when opening the console.
client.js?06a0:77 ReferenceError:maxCount is not defined
at VueComponent.clickAnswer (shindan01.vue?5423:59)
at click (shindan01.vue?840f:17)
at inviteWithErrorHandling(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)
It seems that the maxCount variable should have been declared, but there is no such variable.
If I write vue.js in the normal HTML and Javascript, I don't get an error, but why do I get an error when I use the .vue file (Nuxt)?
We are looking for a solution to this error.
The development environment is
Yes.
If you need any other information, I will fill it out.
Why don't you change maxCount=0
to let maxCount=0
as well?
The reference article is written in JavaScript, so it may not be an error to declare it as a global variable with var
as a local variable (let
for Vue), but in the case of Nuxt, it may have been an error to compile once and generate JavaScript.
That part has been modified in the sequel.
https://qiita.com/Sinhalite/items/b294629f8f6edab4e657
© 2024 OneMinuteCode. All rights reserved.