Im building a quiz component in vue, i have a v-for loop on my questions array. When clicking an answer i want to move the v-for index onto the next question.
Currently it shows all my questions, so i need to hide all the others until the correct answer is selected and then move the array on.
Im not sure if this is possible?
<v-card v-for="(question, index) in quizQuestions" :key="index" height="62vh" style="overflow: scroll">
<v-card-title >Question {{ index 1 }}</v-card-title>
<v-card-subtitle>{{ question.value.questionTitle }}</v-card-subtitle>
<v-card-text>
<v-btn v-for="(answer, index) in JSON.parse(question.value.answers)" :key="index" @click="checkAnswer(answer.correct, index)" x-large>
{{ answer.text }}
</v-btn>
</v-card-text>
<v-row no-gutters>
<v-divider></v-divider>
<div>Question {{ index 1}} of {{ quizQuestions.length }}</div>
<v-progress-linear height="3vh" :value="quizQuestions.length"></v-progress-linear>
</v-row>
</v-card>
CodePudding user response:
So, you need to wrap the v-card
in a template
tag, and add on the v-card
an v-if
condition to show only the question index which equals to the currentIndex.
<template v-for="(question, index) in quizQuestions">
<v-card v-if="index === currentIndex" :key="index" height="62vh" style="overflow: scroll">
<v-card-title >Question {{ index 1 }}</v-card-title>
<v-card-subtitle>{{ question.value.questionTitle }}</v-card-subtitle>
<v-card-text>
<v-btn
v-for="(answer, index) in JSON.parse(question.value.answers)"
:key="index"
@click="checkAnswer(answer.correct, index)"
x-large
>
{{ answer.text }}
</v-btn>
</v-card-text>
<v-row no-gutters>
<v-divider></v-divider>
<div>Question {{ index 1 }} of {{ quizQuestions.length }}</div>
<v-progress-linear height="3vh" :value="quizQuestions.length"></v-progress-linear>
</v-row>
</v-card>
</template>
And in the js
create a state for the currentIndex
and a function to go to the next question by increase the currentIndex
.
data: {
return {
currentIndex: 0,
}
},
methods: {
nextQuestion() {
this.currentIndex
}
}
CodePudding user response:
You should add computed property to display the active question instead of your v-for to display all questions and it should look something like this
data: () => ({
activeQuestionIndex: 1,
quizQuestions: ["#f00", "#ccff00", "#eee", "#0f0"],
}),
computed:{
activeQuestion: function () {
return this.quizQuestions[this.activeQuestionIndex]
}
}
So you remove v-for
and everywhere where you used question.someproperty
now you will use activeQuestion.someporperty
And activeQuestionIndex
incrementation you should handle inside yours checkAnswer
function