Vuejs - 实现上一个/下一个按钮来显示调查问题 [英] Vuejs - Implement previous/next buttons to display surveys questions

问题描述

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

 
<p class="lead fw-bold">{{ item.question }}</p><div class="form-check";v-for=(choice, index) in item.choices":key=索引"><input class="form-check-input";类型=收音机":name="我":值=索引"@change="checkAnswer(item.questionIndex, index)";:disabled="answeredQuestions[i]"><label class="form-check-label";for=">{{ index }}) {{ choice }}</label>

export default {name: '测验',数据() {返回 {已回答问题:[]}},安装(){front.on('questions', (data) => {控制台日志(数据)this.$store.commit('quizQuestions', data);this.$store.commit('contentLoaded', true);});},计算:{isLoading() {返回 this.$store.getters.showLoader;},问题() {返回 this.$store.getters.quiz;},},方法: {checkAnswer(问题索引，选择){this.answeredQuestions.push(true);...}}}

因为我想避免滚动，所以我想实现一个按钮，单击该按钮时将向用户显示下一个问题.由于我使用的是 v-for 我不确定如何实现这一点，因为我知道 v-if 和 v-for 如果一起使用会发生冲突.任何人都可以建议我继续前进的方法吗?

解决方案

您可以使用 Swiper 带有按钮.或者，如果您想将每个问题与路线连接起来，您可以更改每个问题的当前路线 - 您只需使用 $route.push('surveyId/questionId') 调用将处理程序传递给您的按钮.每个选项都将帮助您避免将 v-if 与 v-for 一起使用.

I have this code in my vuejs component. It will display some survey questions to the user on a mobile app.

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

Since I want to avoid the scroll, I want to implement a button that when is clicked will display the next question to the user. Since I'm using a v-for I'm not sure on how to implement this, as I know v-if and v-for will conflict if used togheter. Can anyone suggest me a way to proceed?

解决方案

You can use Swiper with buttons for that. Or if you want to connect each question with route you can change current route on every question - you just need to pass the handler to your buttons with $route.push('surveyId/questionId') calls. Each option will help you avoid using v-if with v-for.

这篇关于Vuejs - 实现上一个/下一个按钮来显示调查问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！