Vue3+Bootstrap4测验应用前后切换题目时已选答案无法留存如何解决

问题1解答 #

完全可以仅依靠JavaScript实现已提交答案的可靠留存，不需要调用API将数据存入数据库：

• 仅需要当前会话生效的话，直接用Vue自身的响应式数据存储即可
• 如果需要页面刷新后依然留存，再加一层localStorage本地存储就能实现

你当前遇到的答案丢失问题，是因为仅将选中答案存在了全局的selectedAnswer变量中，切换题目时还手动清空了该变量，同时没有将选中值同步存储到对应题目对象中，切换回已答题目时自然没有历史数据。

问题2解答 #

Trivia API仅支持GET请求拉取公开的题目数据，不提供答案提交、用户答题数据存储的相关能力，完全无法满足存用户答案的需求，要做全栈的话这部分能力需要你自行开发后端接口实现。

前端留存答案的具体修改方案 #

只需要修改几处核心逻辑即可解决问题：

1. 切换题目时先存储当前题的选中答案，进入新题目后再读取历史选中值
2. 去掉手动操作DOM修改样式的逻辑，换成Vue的动态绑定写法，避免样式丢失

修改的代码片段 #

1. 调整nextQuestion和prevQuestion方法

nextQuestion() {
  // 先存储当前题的选中答案
  this.results[this.questionCount].selectedAnswer = this.selectedAnswer;
  if (this.questionCount < this.results.length - 1) {
    this.questionCount++;
    // 读取目标题的历史选中值，没有就为空
    this.selectedAnswer = this.results[this.questionCount].selectedAnswer || "";
  }
},
prevQuestion() {
  // 先存储当前题的选中答案
  this.results[this.questionCount].selectedAnswer = this.selectedAnswer;
  if (this.questionCount >= 1) {
    this.questionCount--;
    // 读取目标题的历史选中值
    this.selectedAnswer = this.results[this.questionCount].selectedAnswer || "";
  }
},

2. 修改答案项的动态样式绑定（HTML部分）

<li 
  v-for="answer in answers" 
  :key="answer" 
  @click="checkAnswer(answer)"
  :class="{
    'text-white bg-success': selectedAnswer === answer && answer === results[questionCount].correct_answer,
    'text-white bg-danger': selectedAnswer === answer && answer !== results[questionCount].correct_answer
  }"
>
  {{answer}}
</li>

3. 简化checkAnswer方法，移除DOM操作

checkAnswer(answer) {
  this.selectedAnswer = answer;
  const currentCorrectAnswer = this.results[this.questionCount].correct_answer;
  if (answer === currentCorrectAnswer) {
    if (this.correctAnswers.indexOf(currentCorrectAnswer) === -1) {
      this.correctAnswers.push(currentCorrectAnswer);
    }
  } else {
    // 用户修改答案为错误时，移除之前的正确记录
    this.correctAnswers = this.removeElementFromArray(this.correctAnswers, currentCorrectAnswer)
  }
}

修改完成后，前后切换题目时已选答案和对应的正误样式都会正常保留。

内容的提问来源于stack exchange，提问作者Razvan Zamfir