Javascript Vue.js-在单击按钮时遍历数据对象

我正在尝试使用vue.js创建一个测验，但似乎不知道如何使“下一步”按钮遍历我的数据。希望屏幕显示包含问题和答案的对象（即问题一、问题二），然后在单击“下一步”时显示下一个对象。正如您将看到的，我在现有代码中进行了几次尝试，但都没有成功

测验组件模板：

<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>

{{currentQuestion.q}
{{答案}
返回
下一个

测验脚本：

<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>

从“vuex”导入{mapGetters}；
导出默认值{
名称：'测验'，
计算：{
…映射获取程序（'用户'{
loggedIn:“loggedIn”
})
},
数据：（）=>({
货币：0，
当前问题:{
问：“卡什登”，
答案：['1'，'2'，'3']
},
问题一：{
问：“你想花多少分钟？”，
答案：[“短（15-20）”，“中（20-40）”，“长（40-60）”]
},
问题二：{
问：“你想专注于哪种肌肉群？”，
ans:[‘上身’、‘下身’、‘核心’、‘全身’]
},
问题三：{
问：“你想要什么级别的强度？”，
ans:[‘休闲步行’、‘快速步行’、‘慢跑’、‘短跑’]
},
问题部分：[这个。问题一，这个。问题二，这个。问题三]
}),
方法：{
问题导航：功能（）{
questionParts=[this.questionOne，this.questionTwo，this.questionTwo]
currentQuestion=questionParts[当前]
},
qNext:函数（）{
this.currentQuestion=this.questionParts[this.curr++]
}
}
}

正如你所看到的，我尝试了“qNext”方法和“questionNav”方法，但都不管用。再一次，我想让“下一个”重复一遍[问题一，问题二，问题三]。我是vue的新手，因此非常感谢您的帮助。谢谢大家!

qNext:函数（）{
this.currentQuestion.q=this.questionParts[this.curr++].q
this.currentQuestion.ans=this.questionParts[this.curr++].ans
}

当前实现的问题是，您试图在无法访问

问题一

、

问题二

和

问题三

的上下文中填充

问题部分

，这意味着您的问题数组将被未定义的值填充

总的来说，只要您确保

questionParts

确实包含问题对象，您所做的工作就应该有效。如果您想在

data

方法中保留该逻辑，可以这样做：

数据：（）=>{
常量问题一={
问：“你想花多少分钟？”，
答案：[“短（15-20）”，“中（20-40）”，“长（40-60）”]
};
常量问题二={
问：“你想专注于哪种肌肉群？”，
ans:[‘上身’、‘下身’、‘核心’、‘全身’]
};
常量问题三={
问：“你想要什么级别的强度？”，
ans:[‘休闲步行’、‘快速步行’、‘慢跑’、‘短跑’]
};
const questionParts=[问题一、问题二、问题三]
返回{
货币：0，
当前问题:{
问：“卡什登”，
答案：['1'，'2'，'3']
},
问题一，
问题二，
问题三，
问题部分，
}
},

通过在实际返回

data（）

的值之前声明几个变量，可以正确填充

questionParts

数组。这应该足以让你的测验发挥作用

<> P>有一些其他的改进，您可能需要考虑，例如：

• 您可以直接实例化问题数组，而不是声明

  questionOne

  、

  questionTwo

  和

  questionTwo

  对象。根据您提供的代码示例，将每个问题作为一个不同的对象似乎并不特别有用

• currentQuestion

  可以是一个计算属性，在索引

  curr

  处返回问题。然后，您将只能在单击处理程序中递增或递减

  curr

  ，而computed属性将负责返回正确的问题，而无需显式分配

  currentQuestion

---

我怀疑这与您在函数内部使用“this”引用主对象属性有关这是特定于上下文的，因此在方法中，它将是方法对象，而不是主对象method@GlynnHurrell我最初没有“这个”，但如果没有“这个”也不行，它们将是当地的财产。您是否尝试过将“this”传递到函数构造函数中，以便qNext:function（obj）{obj.currentQuestion=obj.questionParts[obj.curr++]}，然后调用qNext（this）@GlynnHurrell no，但我现在就试试！非常感谢您提供的解决方案和伟大的优化建议！