浏览 Vue.Js 调查

Question

我正在使用 Vue.Js 进行调查，这基本上是应用程序的主要部分和目的。我的导航有问题。我的上一个按钮不起作用，下一个继续循环，而不是只前进到下一个问题。我想要完成的只是一次只显示一个问题，并使用 next 和 prev 按钮以正确的顺序浏览它们，并存储每个输入的值，我稍后将使用这些值来计算输出调查结束后，在结果页面上。我已经上传了一个简短的代码示例，其中只有两个问题只是为了展示这个问题。 https://jsfiddle.net/cgrwe0u8/

    new Vue({
  el: '#quizz',
  data: {
    question1: 'How old are you?',
    question2: 'How many times do you workout per week?',
    show: true,
    answer13: null,
    answer10: null

  }

})

document.querySelector('#answer13').getAttribute('value');
document.querySelector('#answer10').getAttribute('value');

HTML

    <script src="https://unpkg.com/vue"></script>

<div id="quizz" class="question">
    <h2 v-if=show>{{ question1 }}</h2>
    <input v-if=show type="number" v-model="answer13">
    <h2 v-if="!show">{{ question2 }}</h2>
    <input v-if="!show" type="number" v-model="answer10">
    <br>
<div class='button' id='next'><a href='#' @click="show = !show">Next</a></div>
<div class='button' id='prev'><a href='#' @click="show = show">Prev</a>
</div>
</div>

提前致谢！

Answer 1

您应该考虑制作一个用于调查问题的 Vue 组件，这样您就可以轻松地创建多个不同的问题。

Vue.component('survey-question', {
  template: `<div><h2>{{question.text}}</h2><input type="number" v-model="question.answer" /></div>`,
  props: ['question']
});

我已更新您的代码并实现了next 功能，以便您可以尝试创建prev 功能。当然，你应该多清理一下。也许在问题对象上添加一个属性，以便它可以设置input 应该是什么类型。像这样的东西，使它更可重用。

https://jsfiddle.net/9rsuwxvL/2/

Answer 2

如果您拥有超过 1 个的东西，请尝试使用数组，并使用循环对其进行处理。在这种情况下，您不需要循环，但需要记住这一点。

由于您一次只需要呈现一个问题，因此只需使用计算属性根据某个索引查找当前问题。该索引将通过下一个/上一个按钮增加/减少。

使用这种格式的代码，如果需要添加问题，只需将其添加到数组中即可。

https://jsfiddle.net/cgrwe0u8/1/

new Vue({
  el: '#quizz',
  data: {
    questions:[
        {question:'How old are you?', answer: ''},
      {question:'How many times do you workout per week?', answer: ''},
    ],
    index:0
  },
  computed:{
    currentQuestion(){
        return this.questions[this.index]
    }
  },
  methods:{
    next(){
        if(this.index + 1 == this.questions.length)
        this.index = 0;
      else
        this.index++;

    },
    previous(){
        if(this.index - 1 < 0)
        this.index = this.questions.length - 1;
      else
        this.index--;
    }
  }

})