javascript - 与 VueJS 一起使用时无法选中单选按钮

Question

我使用 VueJS 创建了一个测验。然而，有一些东西阻止我点击单选按钮。它将检查另一个单选按钮，而不是我想要的单选按钮。

HTML 代码

<div id="app">
      <h1>{{ quiz.title }}</h1>
      <div v-for="(question, index) in quiz.questions" class="question-content">       
        <div v-show="index === questionIndex" class="question-box">
          <h4>{{ question.text }}</h4>
          <ol>
            <li v-for="response in question.responses">
              <label>
                <input type="radio"
                       v-bind:value="response.correct"
                       v-bind:name="index"
                       v-model="userResponses[index]"> {{response.text}}
              </label>
            </li>
          </ol>
          <button v-if="questionIndex > 0" v-on:click="prev">
            Prev
          </button>
          <button v-on:click="next">
            Next
          </button>
        </div>
      </div>
      <div v-show="questionIndex === quiz.questions.length">
        <h2>
        Quiz finished
      </h2>
        <p>
          Total score: {{ score() }} / {{ quiz.questions.length }}
        </p>
        <button v-on:click="start">
          Restart
        </button>
      </div>
    </div>

VueJS代码

// A question has one or more answer, and one or more is valid.
var quiz = {
  title: 'Quiz',
  questions: [
   {
      text: "1. Which of the following is a category or element of the balance sheet?",
      responses: [
        {text: 'Expenses'},
        {text: 'Gains'},
        {text: 'Liabilities', correct: true},
        {text: 'Losses'},
      ]

    }, {
      text: "2. Which of the following is an asset account?",
      responses: [
        {text: 'Accounts Payable'},
        {text: 'Prepaid Insurance', correct: true},
        {text: 'Unearned Revenue'}
      ]
    }
  ]
};

new Vue({
  el: '#app',
  data: {
    quiz: quiz,
    // Store current question index
    questionIndex: 0,
    // An array initialized with "false" values for each question
    // It means: "did the user answered correctly to the question n?" "no".
    userResponses: Array(quiz.questions.length).fill(false)
  },
  // The view will trigger these methods on click
  methods: {
    // Go to next question
    next: function() {
      this.questionIndex++;
    },
    // Go to previous question
    prev: function() {
      this.questionIndex--;
    },
    // Return "true" count in userResponses
    score: function() {
      return this.userResponses.filter(function(val) { return val }).length;
    },

    // Restart quiz
    start: function() {
      this.questionIndex = 0;
    }
  }
});

您可以在以下位置查看实时代码:https://jsfiddle.net/dalenguyen/z4rj62c6/1/

Answer 1

对名称属性使用嵌套索引。

HTML

 <div id="app">
  <h1>{{ quiz.title }}</h1>
  <div v-for="(question, index) in quiz.questions" class="question-content">
    <div v-show="index === questionIndex" class="question-box">
      <h4>{{ question.text }}</h4>
      <ol>
        <li v-for="(response, child_index) in question.responses">
          <label>
            <input type="radio" v-bind:value="response.text" v-bind:name="response.text" v-model="userResponses[index]"> {{response.text}}
          </label>
        </li>
      </ol>
      <button v-if="questionIndex > 0" v-on:click="prev">
        Prev
      </button>
      <button v-on:click="next">
        Next
      </button>
    </div>
  </div>
  <div v-show="questionIndex === quiz.questions.length">
    <h2>
        Quiz finished
      </h2>
    <p>
      Total score: {{ score() }} / {{ quiz.questions.length }}
    </p>
    <button v-on:click="start">
      Restart
    </button>
  </div>
</div>

JS:计算正确答案

 score: function() {
      correctCount = 0;
      that = this;
      this.quiz.questions.filter(function(val, i) {
        val.userAnswerCorrect = false;
        val.userAnswer = that.userResponses[i];

        val.responses.filter(function(ans, j) {
          if (ans.correct == true && val.userAnswer == ans.text) {
            correctCount++;
          }

        })
      });

      return correctCount;
    }

演示:https://jsfiddle.net/sumitridhal/esshqr25/