Vue答题组件开发：点击答案后切换至下一题实现方案咨询

这个需求完全可以实现，核心思路是通过控制当前显示的题目索引，只渲染当前需要展示的题目，而非遍历所有题目。具体修改步骤如下：

1. 添加当前题目索引状态 #

在组件的data中新增变量追踪当前显示的题目位置，初始值设为0：

data() {
  return {
    currentQuestionIndex: 0,
    // 你的原有数据，比如quizQuestions
  }
}

2. 修改模板，仅渲染当前题目 #

移除原有的v-for循环，直接根据currentQuestionIndex获取当前题目，页面将只展示一道题：

<v-card class="elevation-0" height="62vh" style="overflow: scroll">
  <v-card-title class="text-h5 primary--text">Question {{ currentQuestionIndex + 1 }}</v-card-title>
  <v-card-subtitle>{{ quizQuestions[currentQuestionIndex].value.questionTitle }}</v-card-subtitle>
  <v-card-text>
    <v-btn 
      v-for="(answer, index) in JSON.parse(quizQuestions[currentQuestionIndex].value.answers)" 
      :key="index" 
      class="elevation-0 mr-4 rounded-lg" 
      @click="checkAnswer(answer.correct)" 
      x-large
    >
      {{ answer.text }}
    </v-btn>
  </v-card-text>
  <v-row class="d-flex flex-column" no-gutters>
    <v-divider></v-divider>
    <div>Question {{ currentQuestionIndex + 1}} of {{ quizQuestions.length }}</div>
    <v-progress-linear 
      height="3vh" 
      class="rounded-xl" 
      :value="((currentQuestionIndex + 1) / quizQuestions.length) * 100"
    ></v-progress-linear>
  </v-row>
</v-card>

3. 更新答题校验方法 #

修改checkAnswer方法，当答案正确时递增当前题目索引（需判断是否已到最后一题）：

methods: {
  checkAnswer(isCorrect) {
    if (isCorrect) {
      // 未到最后一题时切换下一题
      if (this.currentQuestionIndex < this.quizQuestions.length - 1) {
        this.currentQuestionIndex++
      } else {
        // 可添加答题完成后的逻辑，比如提示结束
        alert('答题完成！')
      }
    } else {
      // 可选：添加答错提示逻辑
      alert('答案错误，请重试！')
    }
  }
}

补充说明 #

• 这种单题渲染的方式完全满足「答对后切换下一题，其余题目暂不显示」的需求。
• 进度条数值改为基于当前索引计算，能准确反映答题进度。
• 可根据需求扩展答错逻辑，比如允许重试、显示正确答案等。

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