Estoy creando un componente de prueba en vue, tengo un bucle v-for en mi matriz de preguntas. Al hacer clic en una respuesta, quiero mover el índice v-for a la siguiente pregunta.
Actualmente muestra todas mis preguntas, por lo que necesito ocultar todas las demás hasta que se seleccione la respuesta correcta y luego mover la matriz.
No estoy seguro si esto es posible?
<v-card v-for="(question, index) in quizQuestions" :key="index" class="elevation-0" height="62vh" style="overflow: scroll">
<v-card-title class="text-h5 primary--text">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" class="elevation-0 mr-4 rounded-lg" @click="checkAnswer(answer.correct, index)" x-large>
{{ answer.text }}
</v-btn>
</v-card-text>
<v-row class="d-flex flex-column" no-gutters>
<v-divider></v-divider>
<div>Question {{ index + 1}} of {{ quizQuestions.length }}</div>
<v-progress-linear height="3vh" class="rounded-xl" :value="quizQuestions.length"></v-progress-linear>
</v-row>
</v-card>
Por lo tanto, debe envolver la v-card en una etiqueta de template y agregar en la v-card virtual una condición v-if para mostrar solo el índice de preguntas que es igual al índice actual.
<template v-for="(question, index) in quizQuestions">
<v-card v-if="index === currentIndex" :key="index" class="elevation-0" height="62vh" style="overflow: scroll">
<v-card-title class="text-h5 primary--text">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"
class="elevation-0 mr-4 rounded-lg"
@click="checkAnswer(answer.correct, index)"
x-large
>
{{ answer.text }}
</v-btn>
</v-card-text>
<v-row class="d-flex flex-column" no-gutters>
<v-divider></v-divider>
<div>Question {{ index + 1 }} of {{ quizQuestions.length }}</div>
<v-progress-linear height="3vh" class="rounded-xl" :value="quizQuestions.length"></v-progress-linear>
</v-row>
</v-card>
</template>
Y en el js cree un estado para el currentIndex y una función para ir a la siguiente pregunta aumentando el currentIndex .
data: {
return {
currentIndex: 0,
}
},
methods: {
nextQuestion() {
++this.currentIndex
}
}
Debe agregar la propiedad calculada para mostrar la pregunta activa en lugar de su v-for para mostrar todas las preguntas y debería verse así
data: () => ({
activeQuestionIndex: 1,
quizQuestions: ["#f00", "#ccff00", "#eee", "#0f0"],
}),
computed:{
activeQuestion: function () {
return this.quizQuestions[this.activeQuestionIndex]
}
}
Entonces elimina v-for y en todas partes donde usó question.someproperty ahora usará activeQuestion.someporperty
Y el incremento activeQuestionIndex de QuestionIndex que debe manejar dentro de la función checkAnswer suya