javascript - Vue-js 记住每个问题的复选框选择

Question

我正在制作一个测验应用程序。我有问题选择菜单，我需要为每个问题保存每个复选框状态。例如，如果您要为第 1 个问题选择一个答案，即使您跳到第 3 个问题，我也需要保存您的选择，这样当您回到第 1 个问题时，您的旧选择仍然存在。

现在我遇到的问题是 - 我的复选框不是唯一的，它们对于每个问题都是相同的。请看一下发生了什么的 gif。

https://i.imgur.com/hua2NI8.gif

这是我的代码

<template>
  <div v-if="loading"><loader></loader></div>
  <div v-else class="main">
    <h5 class="test-title">Test</h5>
    <h5 class="choosequestion">
      <font-awesome-icon icon="list-ul" style="margin-right: 8px" />Choose question
    </h5>
    <div v-dragscroll="true" class="questionsbox">
      <!-- answered, current -->
      <input v-for="(question, index) in questions" :key="index" :value="index + 1" @click="chooseQuestion(index)" class="questionbox" type="button" />
    </div>
    <div class="buttons">
      <a class="ctlBtn">Restart</a>
      <a class="ctlBtn">End</a>
    </div>
    <div class="questionmain">
      <h5 class="questiontext">
        <font-awesome-icon icon="question-circle" style="margin-right: 8px" />
        {{ currentQuestion.question }}
      </h5>
      <ul>
        <li
          v-for="( answer, key ) in currentQuestion.answers"
          :index="currentQuestion.key"
          :key="answer.title"
        >
          <input v-model="checkedAnswers[key]" @change="answerClick" :id="answer.title" type="checkbox" />
          <label :for="answer.title" >{{ answer.title }}</label>
        </li>
        {{ checkedAnswers }}
      </ul>
      <img
        class="questionimg"
        :src="currentQuestion.image_url"
      />
      <a class="nextBtn" @click="nextQuestion"><font-awesome-icon icon="arrow-right" style="color: black;"/></a>
    </div>
  </div>
</template>

<script>
import { dragscroll } from "vue-dragscroll";
import Loader from "./Loader.vue";

export default {
  components: { Loader }, 
  name: "TestCard",
  data() {
    return {
      questions: [],
      loading: true,
      index: 0,
      checkedAnswers: []
    };
  },
  computed: {
    currentQuestion() {
      if (this.questions !== []) {
        return this.questions[this.index];
      }
      return null;
    },
  },
  methods: {
    async getQuestions() {
      this.loading = true;
      let response = await fetch("http://localhost:4000/test");
      let jsonResponse = await response.json();
      // put data on questions property
      this.questions = jsonResponse.questions;
      this.loading = false;
    },
    answerClick() {
      console.log("answer clicked");
    },
    chooseQuestion(index) {
      this.index = index;
    },
    nextQuestion() {
      this.index += 1;
      console.log("next question")
    }
  },
  mounted() {
    this.getQuestions();
  },
  directives: {
    dragscroll,
  },
};
</script>

之后，我想在用户按下“结束”时检查答案是否正确。如何将每个复选框连接到它的答案和问题，然后检查它是否正确？对于每个正确答案，我在 JSON 中都有 "correct: true" :)

谢谢

Answer 1

无需过多更改现有代码，您就可以着手将您的答案映射到此类问题。不需要 Vuex 或更多的复杂性。

<template>
  ...
      <ul>
        <li
          v-for="( answer, key ) in currentQuestion.answers"
          :index="currentQuestion.key"
          :key="answer.title"
        >
// we pass the key to answerClick to be able to map the answer to the current question
          <input v-model="checkedAnswers[key]" @change="answerClick(key)" :id="answer.title" type="checkbox" />
          <label :for="answer.title" >{{ answer.title }}</label>
        </li>
        {{ checkedAnswers }}
...
</template>
</template>
<script>
export default {
  name: "TestCard",
  data() {
    return {
      questions: [],
      loading: true,
      index: 0,
      checkedAnswers: [],
      answers: []
    };
  },
  computed: {
    currentQuestion() {
      if (this.questions !== []) {
        return this.questions[this.index];
      }
      return null;
    }
  },
  methods: {
    async getQuestions() {
      this.loading = true;
      let response = await fetch("http://localhost:4000/test");
      let jsonResponse = await response.json();
      // put data on questions property
      this.questions = jsonResponse.questions;
      this.loading = false;
    },
    answerClick(key) {
      console.log("answer clicked");
      if (!this.answers[this.index]) this.answers[this.index] = [] // if the current question has no answers mapped yet set an empty array 
      this.answers[this.index][key] = this.checkedAnswers[key]; // set the answer to whatever value it has currently (true, false)
    },
    chooseQuestion(index) {
      this.index = index;
      this.checkedAnswers = this.answers[this.index] ? this.answers[this.index] : []; // set the checkedAnswers to what we can find in our mapping, if there is nothing to find use an empty array
    },
    nextQuestion() {
      this.index += 1;
      this.checkedAnswers = []; // unset the checked answers for the next question
      console.log("next question")
    }
  },
  mounted() {
    this.getQuestions();
  },
};