我在Vue.js组件中有这段代码。它将在移动的应用程序上向用户显示一些调查问题。

<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);
      ...
    }
  }
}

因为我想避免滚动，我想实现一个按钮，当点击时，将显示下一个问题给用户。因为我使用的是v-for，我不知道如何实现这一点，因为我知道v-if和v-for如果一起使用会发生冲突。我该如何继续？