Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

196
Visualizações
onClick move to next index v-for and render

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" 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>
almost 4 years ago · Santiago Trujillo
2 Respostas
Responde à pergunta

0

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" 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>

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
  }
}

almost 4 years ago · Santiago Trujillo Relatório

0

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

almost 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda