Я пытаюсь создать тест, используя vue.js, и не могу понять, как заставить кнопку «Далее» перебирать мои данные. Надежда состоит в том, чтобы на экране отображался объект, содержащий вопрос с ответами (т.е. questionOne, questionTwo), а затем показывался следующий объект при нажатии кнопки «Далее». У меня есть несколько попыток в существующем коде, как вы увидите, но ни одна из них не работает.

Шаблон компонента викторины:

<template>
  <div class="quiz-container">
    <div
      class="question-container">
      <h1> {{ currentQuestion.q }} </h1>
    </div>
    <div class="answer-container">
      <v-btn
        v-for="answer in currentQuestion.ans"
        :key="answer"
        outlined
        block
        x-large
        class="answer-btn"
      >
      {{ answer }}
      </v-btn>
    </div>
    <div
      class="navigation flex-row"
    >
      <v-btn text x-large @click="questionNav.curr--">Back</v-btn>
      <v-spacer />
      <v-btn text x-large @click="qNext()">Next</v-btn>
    </div>
  </div>
</template>

Сценарий викторины:

<script>
  import { mapGetters } from 'vuex';
  export default {
    name: 'quiz',
    computed: {
      ...mapGetters('user', {
        loggedIn: 'loggedIn'
      })
    },
    data: () => ({
      curr: 0,
      currentQuestion: {
         q: 'kasjdn' ,
         ans: ['1', '2', '3']
      },
      questionOne: {
         q: 'How many minutes do you want to spend?' ,
         ans: ['Short (15-20)', 'Medium (20-40)', 'Long (40-60)']
      },
      questionTwo: {
         q: 'What muscle group do you want to focus on?' ,
         ans: ['Upper Body', 'Lower Body', 'Core', 'Full Body']
      },
      questionThree: {
         q: 'What level intensity do you want?' ,
         ans: ['Leisure Walking', 'Speed Walking', 'Jogging', 'Sprinting']
      },
      questionParts: [this.questionOne, this.questionTwo, this.questionThree]
    }),
    methods: {
      questionNav: function () {
        questionParts = [this.questionOne, this.questionTwo, this.questionThree]
        currentQuestion = questionParts[curr]
      },
      qNext: function () {
        this.currentQuestion = this.questionParts[this.curr++]
      }
    }
  }
</script>

Как вы можете видеть, я пробовал метод "qNext" и метод "questionNav", но ни один из них не работает. Опять же, я хотел бы, чтобы «Далее» перебирало [questionOne, questionTwo, questionThree]. Я относительно новичок в Vue, поэтому любая помощь будет принята с благодарностью. Спасибо!

0
A.Lo.01 2 Май 2020 в 03:53

2 ответа

Лучший ответ

Проблема с текущей реализацией заключается в том, что вы пытаетесь заполнить questionParts в контексте, где questionOne, questionTwo и questionThree недоступны, это означает, что ваш массив вопросов будет заполнен неопределенными значениями.

В целом, то, что вы сделали, должно работать, если вы уверены, что questionParts содержит объекты вопроса. Если вы хотите сохранить эту логику в методе data, вот как вы можете это сделать:

data: () => {
  const questionOne = {
    q: 'How many minutes do you want to spend?' ,
    ans: ['Short (15-20)', 'Medium (20-40)', 'Long (40-60)']
  };
  const questionTwo = {
    q: 'What muscle group do you want to focus on?' ,
    ans: ['Upper Body', 'Lower Body', 'Core', 'Full Body']
  };
  const questionThree = {
    q: 'What level intensity do you want?' ,
    ans: ['Leisure Walking', 'Speed Walking', 'Jogging', 'Sprinting']
  };
  const questionParts = [questionOne, questionTwo, questionThree]
  return {
    curr: 0,
    currentQuestion: {
      q: 'kasjdn' ,
      ans: ['1', '2', '3']
    },
    questionOne,
    questionTwo,
    questionThree,
    questionParts,
  }
},

Объявляя несколько переменных перед фактическим возвращением значения data(), вы можете правильно заполнить массив questionParts. Этого должно быть достаточно, чтобы ваш тест заработал.

Есть несколько других улучшений, которые вы можете рассмотреть, например:

  • Вместо того, чтобы объявлять объекты questionOne, questionTwo и questionThree, вы можете напрямую создать массив вопросов. Учитывая приведенный вами пример кода, не представляется особенно полезным иметь каждый вопрос в качестве отдельного объекта.
  • currentQuestion может быть вычисляемым свойством, которое возвращает вопрос по индексу curr. После этого вы сможете только увеличивать или уменьшать curr в обработчиках кликов, а вычисленное свойство позаботится о возвращении правильного вопроса без необходимости явного назначения currentQuestion.
1
paulgv 2 Май 2020 в 01:41
qNext: function () {
        this.currentQuestion.q = this.questionParts[this.curr++].q
        this.currentQuestion.ans = this.questionParts[this.curr++].ans
      }
0
djiss 2 Май 2020 в 01:02