#javascript #vue.js
Вопрос:
Это простое приложение для викторины Vue, я не знаю, почему это происходит:
На первом вопросе я выбираю ответ «а», затем нажимаю «Далее», и в следующем вопросе я НЕ МОГУ снова выбрать «а». Поэтому я выбираю «в», и на третий вопрос единственный ответ, который я могу выбрать, — «с».
Все работает правильно, кроме этой штуки, и я хочу это исправить.
Кроме того, как я могу каждый раз показывать случайные вопросы? Поэтому каждый раз, когда кто-то играет в викторину, вопросы отображаются всегда в другом порядке.
Почему это происходит?
Шаблон Vue
<template>
<div id="app">
<div class="flex">
<h2 class="title">Simple Quiz</h2>
<div class="quiz">
<div v-if="domandaCorrente < domande.length" class="question">
<h2>{{ domande[domandaCorrente].domanda }}</h2>
<label
class="answer"
:for="index"
v-for="(risposta, index) in domande[domandaCorrente].risposte"
:key="index"
:class="{
'hover border-grey': domandaScelta == '',
'bg-red': domandaScelta == index,
'bg-green':
index == domande[domandaCorrente].rispostaCorretta amp;amp;
domandaScelta != '',
}"
>
<input
type="radio"
:name="index"
:id="index"
class="hidden"
:value="index"
@change="select($event)"
/>
{{ risposta }}
</label>
</div>
<div v-else>
Results
<div>
<h2>
Correct Answers: <span class="t-green">{{ correct }}</span>
</h2>
<h2>
Wrong Answers: <span class="t-red">{{ wrong }}</span>
</h2>
</div>
<button @click="reload()">Reload</button>
</div>
<div
v-show="domandaScelta != '' amp;amp; domandaCorrente < domande.length - 1"
class="button"
>
<button @click="nextQuestion()">Next</button>
</div>
<div
v-show="domandaScelta != '' amp;amp; domandaCorrente == domande.length - 1"
class="button"
>
<button @click="showResult()">Finish</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
domandaCorrente: 0,
correct: 0,
wrong: 0,
domandaScelta: "",
domande: [
{
domanda: "Quante champions ha vinto il Milan?",
risposte: { a: "2", b: "5", c: "7", d: "10" },
rispostaCorretta: "c",
},
{
domanda: "Quante champions ha vinto l'Inter?",
risposte: { a: "1", b: "5", c: "7", d: "10" },
rispostaCorretta: "a",
},
{
domanda: "Quante champions ha vinto la Juve?",
risposte: { a: "2", b: "5", c: "7", d: "10" },
rispostaCorretta: "a",
},
],
};
},
methods: {
select(e) {
this.domandaScelta = e.target.value;
console.log(this.domandaScelta)
console.log(this.domandaCorrente)
if(this.domandaScelta == this.domande[this.domandaCorrente].rispostaCorretta) {
this.correct
} else {
this.wrong
}
},
nextQuestion() {
this.domandaScelta = ""
this.domandaCorrente
},
showResult() {
this.domandaCorrente
},
reload() {
this.domandaCorrente = 0
this.domandaScelta = ""
this.wrong = 0
this.correct = 0
}
},
components: {},
};
</script>
Ответ №1:
1 — Добавьте selected переменную для хранения выбранных входных данных.
Установите значение false, когда пользователь нажимает на nextQuestion кнопку .
selected: false,
Установите его значение в select функции:
this.selected = e.target.value
2 — В вашем html-коде проверьте checked атрибут с selected помощью . Также правильный name атрибут должен быть одинаковым для всех входных данных.
<input type="radio" :checked="index === selected" :name="`ans-${domandaCorrente}`" :id="`ans-${index}`" class="hidden" :value="index" @change="select($event)" />
var app = new Vue({
el: '#app',
name: "App",
data() {
return {
domandaCorrente: 0,
correct: 0,
selected: false,
wrong: 0,
domandaScelta: "",
domande: [{
domanda: "Quante champions ha vinto il Milan?",
risposte: {
a: "2",
b: "5",
c: "7",
d: "10"
},
rispostaCorretta: "c",
},
{
domanda: "Quante champions ha vinto l'Inter?",
risposte: {
a: "1",
b: "5",
c: "7",
d: "10"
},
rispostaCorretta: "a",
},
{
domanda: "Quante champions ha vinto la Juve?",
risposte: {
a: "2",
b: "5",
c: "7",
d: "10"
},
rispostaCorretta: "a",
},
],
};
},
methods: {
select(e) {
this.selected = e.target.value
this.domandaScelta = e.target.value;
console.log(this.domandaScelta)
console.log(this.domandaCorrente)
if (this.domandaScelta == this.domande[this.domandaCorrente].rispostaCorretta) {
this.correct
} else {
this.wrong
}
},
nextQuestion() {
this.selected = false;
this.domandaScelta = ""
this.domandaCorrente
},
showResult() {
this.domandaCorrente
},
reload() {
this.domandaCorrente = 0
this.domandaScelta = ""
this.wrong = 0
this.correct = 0
}
},
components: {},
}) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="flex">
<h2 class="title">Simple Quiz</h2>
<div class="quiz">
<div v-if="domandaCorrente < domande.length" class="question">
<h2>{{ domande[domandaCorrente].domanda }} </h2>
<label class="answer" :for="index" v-for="(risposta, index) in domande[domandaCorrente].risposte" :key="index" :class="{
'hover border-grey': domandaScelta == '',
'bg-red': domandaScelta == index,
'bg-green':
index == domande[domandaCorrente].rispostaCorretta amp;amp;
domandaScelta != '',
}">
<input type="radio" :checked="index === selected" :name="`ans-${domandaCorrente}`" :id="`ans-${index}`" class="hidden" :value="index" @change="select($event)" />
{{ risposta }}
</label>
</div>
<div v-else>
Results
<div>
<h2>
Correct Answers: <span class="t-green">{{ correct }}</span>
</h2>
<h2>
Wrong Answers: <span class="t-red">{{ wrong }}</span>
</h2>
</div>
<button @click="reload()">Reload</button>
</div>
<div v-show="domandaScelta != '' amp;amp; domandaCorrente < domande.length - 1" class="button">
<button @click="nextQuestion()">Next</button>
</div>
<div v-show="domandaScelta != '' amp;amp; domandaCorrente == domande.length - 1" class="button">
<button @click="showResult()">Finish</button>
</div>
</div>
</div>
</div> Ответ №2:
Попробуйте добавить v-model="domandaScelta" на вход радио:
new Vue({
el: '#demo',
data() {
return {
domandaCorrente: 0,
correct: 0,
wrong: 0,
domandaScelta: "",
domande: [
{
domanda: "Quante champions ha vinto il Milan?",
risposte: { a: "2", b: "5", c: "7", d: "10" },
rispostaCorretta: "c",
},
{
domanda: "Quante champions ha vinto l'Inter?",
risposte: { a: "1", b: "5", c: "7", d: "10" },
rispostaCorretta: "a",
},
{
domanda: "Quante champions ha vinto la Juve?",
risposte: { a: "2", b: "5", c: "7", d: "10" },
rispostaCorretta: "a",
},
],
};
},
methods: {
select(e) {
console.log(e.target)
this.domandaScelta = e.target.value;
console.log(this.domandaScelta)
console.log(this.domandaCorrente)
if(this.domandaScelta == this.domande[this.domandaCorrente].rispostaCorretta) {
this.correct
} else {
this.wrong
}
},
nextQuestion() {
this.domandaScelta = ""
this.domandaCorrente
},
showResult() {
this.domandaCorrente
},
reload() {
this.domandaCorrente = 0
this.domandaScelta = ""
this.wrong = 0
this.correct = 0
}
},
components: {},
}) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div class="flex">
<h2 class="title">Simple Quiz</h2>
<div class="quiz">
<div v-if="domandaCorrente < domande.length" class="question">
<h2>{{ domande[domandaCorrente].domanda }}</h2>
<label
class="answer"
:for="index"
v-for="(risposta, index) in domande[domandaCorrente].risposte"
:key="index"
:class="{
'hover border-grey': domandaScelta == '',
'bg-red': domandaScelta == index,
'bg-green':
index == domande[domandaCorrente].rispostaCorretta amp;amp;
domandaScelta != '',
}"
>
<input
type="radio"
:name="index"
:id="index"
class="hidden"
:value="index"
@change="select($event)"
v-model="domandaScelta"
/>
{{ risposta }}
</label>
</div>
<div v-else>
Results
<div>
<h2>
Correct Answers: <span class="t-green">{{ correct }}</span>
</h2>
<h2>
Wrong Answers: <span class="t-red">{{ wrong }}</span>
</h2>
</div>
<button @click="reload()">Reload</button>
</div>
<div
v-show="domandaScelta != '' amp;amp; domandaCorrente < domande.length - 1"
class="button"
>
<button @click="nextQuestion()">Next</button>
</div>
<div
v-show="domandaScelta != '' amp;amp; domandaCorrente == domande.length - 1"
class="button"
>
<button @click="showResult()">Finish</button>
</div>
</div>
</div>
</div>