In my Vue.js component, I've written code to show survey questions in a mobile app for users. Here is a snippet of the code:
<div class="col-12 p-0" v-for="( i, index ) in questions" :key="i">
<p class="lead fw-bold">{{ item.question }}</p>
<div class="form-check" v-for="(choice, index) in item.choices" :key="index">
<input class="form-check-input" type="radio" :name="i" :value="index" @change="checkAnswer(item.questionIndex, index)" :disabled="answeredQuestions[i]">
<label class="form-check-label" for="">{{ index }}) {{ choice }}</label>
</div>
</div>
export default {
name: 'Quiz',
data() {
return {
answeredQuestions: []
}
},
mounted() {
front.on('questions', (data) => {
console.log(data)
this.$store.commit('quizQuestions', data);
this.$store.commit('contentLoaded', true);
});
},
computed: {
isLoading() {
return this.$store.getters.showLoader;
},
questions() {
return this.$store.getters.quiz;
},
},
methods: {
checkAnswer(questionIndex, choice) {
this.answeredQuestions.push(true);
...
}
}
}
To avoid scrolling, I want to add a button that displays the next question when clicked. However, I'm not sure how to do this with v-for and v-if. How should I proceed?