javascript - 为什么它没有选择我想要的答案？

Question

这是一个简单的 Vue Quiz App，我不知道为什么会这样：

在第一个问题中我选择答案'a'，然后单击下一步，在下一个问题中我不能再次选择'a'。所以我选择'b'，在第三个问题中我唯一可以选择的答案是'c'。

除了这个东西，一切都正常，我想修复它。

另外，我如何每次都显示随机问题？因此，每次有人进行测验时，问题总是以不同的顺序显示。

为什么会这样？

Vue 模板

<template>
  <div id="app">
    <div class="flex">
      <h2 class="title">Simple Quiz</h2>
      <div class="quiz">
        <div v-if="domandaCorrente < domande.length" class="question">
          <h2>{{ domande[domandaCorrente].domanda }}</h2>

          <label
            class="answer"
            :for="index"
            v-for="(risposta, index) in domande[domandaCorrente].risposte"
            :key="index"
            :class="{
              'hover border-grey': domandaScelta == '',
              'bg-red': domandaScelta == index,
              'bg-green':
                index == domande[domandaCorrente].rispostaCorretta &&
                domandaScelta != '',
            }"
          >
            <input
              type="radio"
              :name="index"
              :id="index"
              class="hidden"
              :value="index"
              @change="select($event)"
            />
            {{ risposta }}
          </label>
        </div>
        <div v-else>
          Results
          <div>
            <h2>
              Correct Answers: <span class="t-green">{{ correct }}</span>
            </h2>
            <h2>
              Wrong Answers: <span class="t-red">{{ wrong }}</span>
            </h2>
          </div>
          <button @click="reload()">Reload</button>
        </div>
        <div
          v-show="domandaScelta != '' && domandaCorrente < domande.length - 1"
          class="button"
        >
          <button @click="nextQuestion()">Next</button>
        </div>
        <div
          v-show="domandaScelta != '' && domandaCorrente == domande.length - 1"
          class="button"
        >
          <button @click="showResult()">Finish</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",

  data() {
    return {
      domandaCorrente: 0,
      correct: 0,
      wrong: 0,
      domandaScelta: "",
      
      domande: [
        {
          domanda: "Quante champions ha vinto il Milan?",
          risposte: { a: "2", b: "5", c: "7", d: "10" },
          rispostaCorretta: "c",
        },
        {
          domanda: "Quante champions ha vinto l'Inter?",
          risposte: { a: "1", b: "5", c: "7", d: "10" },
          rispostaCorretta: "a",
        },
        {
          domanda: "Quante champions ha vinto la Juve?",
          risposte: { a: "2", b: "5", c: "7", d: "10" },
          rispostaCorretta: "a",
        },
      ],
      
    };
  },

  methods: {
    select(e) {
      this.domandaScelta = e.target.value;
      console.log(this.domandaScelta)
      console.log(this.domandaCorrente)
      if(this.domandaScelta == this.domande[this.domandaCorrente].rispostaCorretta) {
        this.correct++
      } else {
        this.wrong++
      }
    },

    nextQuestion() {
      this.domandaScelta = ""
      this.domandaCorrente++
    },

    showResult() {
      this.domandaCorrente++
    },

    reload() {
      this.domandaCorrente = 0
      this.domandaScelta = ""
      this.wrong = 0
      this.correct = 0
    }
  },

  components: {},
};
</script>

标签： javascriptvue.js

Answer 1

1-添加一个selected变量来存储选定的输入。

当用户单击时将其设置为 false nextQuestion。

selected: false,

在函数上设置其值select：

this.selected = e.target.value

2-在您的 html 代码中checked使用 . 检查属性selected。同样正确的name属性对于所有输入都相等。

<input type="radio" :checked="index === selected" :name="`ans-${domandaCorrente}`" :id="`ans-${index}`" class="hidden" :value="index" @change="select($event)" />

var app = new Vue({
  el: '#app',
  name: "App",
  data() {
    return {
      domandaCorrente: 0,
      correct: 0,
      selected: false,
      wrong: 0,
      domandaScelta: "",
      domande: [{
          domanda: "Quante champions ha vinto il Milan?",
          risposte: {
            a: "2",
            b: "5",
            c: "7",
            d: "10"
          },
          rispostaCorretta: "c",
        },
        {
          domanda: "Quante champions ha vinto l'Inter?",
          risposte: {
            a: "1",
            b: "5",
            c: "7",
            d: "10"
          },
          rispostaCorretta: "a",
        },
        {
          domanda: "Quante champions ha vinto la Juve?",
          risposte: {
            a: "2",
            b: "5",
            c: "7",
            d: "10"
          },
          rispostaCorretta: "a",
        },
      ],
    };
  },
  methods: {
    select(e) {
      this.selected = e.target.value
      this.domandaScelta = e.target.value;
      console.log(this.domandaScelta)
      console.log(this.domandaCorrente)
      if (this.domandaScelta == this.domande[this.domandaCorrente].rispostaCorretta) {
        this.correct++
      } else {
        this.wrong++
      }
    },
    nextQuestion() {
      this.selected = false;
      this.domandaScelta = ""
      this.domandaCorrente++
    },
    showResult() {
      this.domandaCorrente++
    },
    reload() {
      this.domandaCorrente = 0
      this.domandaScelta = ""
      this.wrong = 0
      this.correct = 0
    }
  },
  components: {},
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="flex">
    <h2 class="title">Simple Quiz</h2>
    <div class="quiz">
      <div v-if="domandaCorrente < domande.length" class="question">
        <h2>{{ domande[domandaCorrente].domanda }} </h2>

        <label class="answer" :for="index" v-for="(risposta, index) in domande[domandaCorrente].risposte" :key="index" :class="{
              'hover border-grey': domandaScelta == '',
              'bg-red': domandaScelta == index,
              'bg-green':
                index == domande[domandaCorrente].rispostaCorretta &&
                domandaScelta != '',
            }">
          <input type="radio" :checked="index === selected" :name="`ans-${domandaCorrente}`" :id="`ans-${index}`" class="hidden" :value="index" @change="select($event)" />
          {{ risposta }}
        </label>
      </div>
      <div v-else>
        Results
        <div>
          <h2>
            Correct Answers: <span class="t-green">{{ correct }}</span>
          </h2>
          <h2>
            Wrong Answers: <span class="t-red">{{ wrong }}</span>
          </h2>
        </div>
        <button @click="reload()">Reload</button>
      </div>
      <div v-show="domandaScelta != '' && domandaCorrente < domande.length - 1" class="button">
        <button @click="nextQuestion()">Next</button>
      </div>
      <div v-show="domandaScelta != '' && domandaCorrente == domande.length - 1" class="button">
        <button @click="showResult()">Finish</button>
      </div>
    </div>
  </div>
</div>