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

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

Answer 2

当前实现的问题是您试图在无法访问questionOne、questionTwo 和questionThree 的上下文中填充questionParts，这意味着您的问题数组将填充未定义价值观。

总的来说，只要您确保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。