[Vuejs]-Conditionally render a div with vue.js

by

0👍

You could have another div or in your notification div to display last answered question.
You can either have a new object that gets overwritten each time you answer correctly or track the index of your loop and use the value of index – 1 to get last answered question. Add a check if index !== 0.

To get index of your loop in html do: v-for="(options, ) in quiz

0👍

I’m seeing conditions with inner conditions for the correct answer notification. So if your quizId is the next one, the outer condition already fails.

It’s likely you have an array with questions and thus have an index for the current question. You could save a property a property on that index that shows if the question is correct, so your condition can be extended to also look back for the previous question

Something like this (pseudo code)

<template v-if="showCorrectMsg">
  Good!
  ...

and then have a computed showCorrectMsg method something like this (pseudo code):

if (  questions[currentIndex].quizResult == 'correct' || 
      ( currentIndex > 0 && questions[currentIndex - 1].quizResult == 'correct' ) 
   ) return true;

return false;

So for this to work you will have to store that flag on each answer given (again, pseudo code):

questions[currentIndex].quizResult = [ theAnswer == theRightAnswer ] ? 'correct' : 'wrong';

Leave a comment