I'm currently working on building a quiz functionality using vue.js, but I've hit a roadblock in trying to make the "Next" button cycle through my data. The goal is to have the screen display the object containing the question and answers (e.g. questionOne, questionTwo), and then move on to the next object when the user clicks "Next". Despite my attempts in the code provided, none of them seem to be effective.
Here's the template for the Quiz Component:
<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.current--">Back</v-btn>
<v-spacer />
<v-btn text x-large @click="qNext()">Next</v-btn>
</div>
</div>
</template>
And here's the script for the Quiz:
<script>
import { mapGetters } from 'vuex';
export default {
name: 'quiz',
computed: {
...mapGetters('user', {
loggedIn: 'loggedIn'
})
},
data() {
return {
curr: 0,
currentQuestion: {
q: 'Sample Question' ,
ans: ['A', 'B', 'C']
},
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() {
questionParts = [this.questionOne, this.questionTwo, this.questionThree]
currentQuestion = questionParts[curr]
},
qNext() {
this.currentQuestion = this.questionParts[this.curr++]
}
}
}
</script>
Although I've tried implementing a "qNext" method and a "questionNav" method, they don't seem to be functioning correctly. Ideally, I would like the "Next" button to progress through [questionOne, questionTwo, questionThree]. As a beginner with vue.js, any guidance or assistance would be highly appreciated. Thank you!