Vue. js - перебор объектов данных по нажатию кнопки

Question

Я пытаюсь создать тест, используя 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", но ни один из них не работает. Опять же, я бы хотел, чтобы «Next» перебрал [questionOne, questionTwo, questionThree]. Я относительно новичок в vue, поэтому любая помощь будет принята с благодарностью. Спасибо!

Answer 1

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

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

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.

.

Answer 2

qNext: function () {
        this.currentQuestion.q = this.questionParts[this.curr++].q
        this.currentQuestion.ans = this.questionParts[this.curr++].ans
      }