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

如果你有一个以上的东西，尝试使用一个数组，并用循环处理它。在这种情况下，您不需要循环，但需要记住它。

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

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

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

})

Answer 2

您应该考虑制作一个用于调查问题的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/

浏览Vue.Js调查

2 个答案: