"使用 vue.js 在测验中显示测验结果"

Question

我正在从 API (DRF) 呈现测验问题并使用 vue.js 作为前端。 我似乎无法让结果通知保留在屏幕上。 当用户继续下一个问题时，它会从上一个问题中删除测验结果。 我希望保留通知。 我试过删除表达式this.quizResult = null<\/code>有什么想法吗？

                <template v-if="activeLesson.lesson_type === 'quiz'">
                  <div
                    class="container"
                    v-for="options in quiz"
                    v-bind:key="options.quizId"
                  >
                    <h3>{{ options.question }}</h3>
                    <div
                      class="control"
                      v-for="correct in quiz"
                      v-bind:key="correct.quizId"
                    >
                      <label class="radio">
                        <input
                          type="radio"
                          :value="options.op1"
                          v-model="options.selectedAnswer"
                        />
                        {{ options.op1 }}
                      </label>
                    </div>
                    <div class="control">
                      <label class="radio">
                        <input
                          type="radio"
                          :value="options.op2"
                          v-model="options.selectedAnswer"
                        />
                        {{ options.op2 }}
                      </label>
                    </div>
                    <div class="control">
                      <label class="radio">
                        <input
                          type="radio"
                          :value="options.op3"
                          v-model="options.selectedAnswer"
                        />
                        {{ options.op3 }}
                      </label>
                    </div>
                    <div class="control">
                      <label class="radio">
                        <input
                          type="radio"
                          :value="options.op4"
                          v-model="options.selectedAnswer"
                        />
                        {{ options.op4 }}
                      </label>
                    </div>
                    <div class="control mt-4">
                      <button class="button is-link" @click="submitQuiz">
                        Submit
                      </button>
                    </div>
                    <br />
                    <template v-if="options.id === quizId">
                      <template v-if="quizResult == 'correct'">
                        <!-- <div clss="container" v-show="correctResult"> -->
                        <div class="notification is-success mt-4">
                          Correct. Well done!
                        </div>
                        <br />
                        <!-- </div> -->
                      </template>
                      <template v-if="quizResult == 'incorrect'">
                        <div class="notification is-danger mt-4">
                          Incorrect. Please try again.
                        </div>
                        <br />
                        <!-- <div class="icon-text" v-show="incorrectResult">
                                                <span class="icon has-text-danger">
                                                    <i class="fas fa-ban"></i>
                                                </span>
                                                <span>Incorrect</span>
                                                </div> -->
                      </template>
                    </template>
                  </div>