[Vuejs]-Scope a single input in Vue built from JSON

by

1👍

✅

You need to track at the question level rather than the global level.

Here are a couple simple changes you can make. Notice the input changes for value and v-model and also the conditions for the correct/wrong spans. This creates a property, selection on each question to track the currently selected answer for this specific question.

<li v-for="response in question.responses">
  <label class="form-check-label">
    <input class="form-check-input" type="radio"
          :key="index"
          :name="question.group"
          :value="response.text"
          v-model="question.selection">
           {{response.text}} 
    <span v-if="question.selection === response.text && response.correct ==='Correct!' ">
      Correct
    </span>
    <span v-else-if="question.selection === response.text && response.correct !=='Correct!' ">
      Wrong
    </span>
  </label>
</li>

You could clean it up some more by altering your data model. There is no reason to save the correct text in the data. You can simply have the answer as a property and determine the textual response based on the selection.

var quizquestions = {
  questions: [
    {
      text: "Subtract 219 from 500.",
      group: "qone",
      responses: [281, 719, 218, -219],
      answer: 281, // correct answer
      selection: null, // for v-model to track selected
    },
  ]
};

Leave a comment