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

})