Vue базовая викторина и кнопка назад - PullRequest
Новая
       16

Vue базовая викторина и кнопка назад

0 голосов
/ 08 ноября 2019

Я работаю над тестом, который обрабатывает несколько страниц. В рамках теста url остается прежним, поэтому если вы нажмете кнопку «Назад» браузера, вы выйдете из теста. Я хочу добавить кнопку назад, чтобы перейти на предыдущую страницу в викторине. Я не уверен, как справиться с этим. Вот мой QuizQuestion.vue шаблон: 

<template>
  <form class="quiz-question" @submit.prevent="advance" :class="screen">
    <transition name="quiz-transition" mode="out-in">
      <div v-if="!isSubmitted" key="question" class="question">
        <div class="question__legend">{{ subtitle }}</div>
        <h1 class="question__title">{{ title }}</h1>
        <div class="question__content" v-html="renderMd(content)"></div>
        <fieldset class="question__fieldset">
          <multiple-choice-answers :options="answers" :name="fieldName" @update="handleUpdate" />
        </fieldset>
      </div>
      <div v-if="isSubmitted" key="response" class="response">
        <div class="question__legend">{{ subtitle }}</div>
        <h1 class="response__title"
            :class="{correct: correct(), incorrect: !correct()}">
          {{ response.title }}
        </h1>
        <div class="response__animation" aria-hidden="true"></div>
        <div class="response__content" v-html="renderMd(response.content)"></div>
        <div class="response__action">
          <button class="response__button" type="submit">
            {{ button }}
          </button>
        </div>
      </div>
    </transition>
  </form>
</template>

<script>
  import QuizQuestionBase from '../QuizQuestionBase';
  import MultipleChoiceAnswers from '../example/MultipleChoiceAnswers';
  export default {
    extends: QuizQuestionBase,
    components: {MultipleChoiceAnswers},
    props: [
      'screen',
      'lastQuestion',
    ],
    computed: {
      buttonText() {
        if (this.lastQuestion) {
          return 'Learn more';
        }
        return 'Next question';
      },
    },
    methods: {
      /**
       * Sets the result on an update event.
       * @param {string} value - Value of the field that emitted the update event.
       */
      handleUpdate: function(value) {
        this.result = value;
        window.scrollTo({
          top: 0,
          behavior: 'smooth',
        });
        this.advance();
      },
    },
  };
</script>
...