Vue.Js調査をナビゲートする

Question

私は調査のためにVue.Jsを使用しています。これは基本的にアプリケーションの主要な部分と目的です。私はナビゲーションに問題があります。私の前のボタンは機能せず、次の質問だけに進むのではなく、次のボタンが円になり続けます。私が達成しようとしているのは、一度に1つの質問のみを表示し、次のボタンと前のボタンを使用して正しい順序でナビゲートし、後で使用する出力を計算するために使用する各入力の値を保存することです調査結果のページには、調査が終了した後に表示されます。私はちょうど問題を紹介するためにわずか2つの質問で私のコードの短いサンプルをフィドルにアップロードしました。事前に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.component('survey-question', { 
    template: `<div><h2>{{question.text}}</h2><input type="number" v-model="question.answer" /></div>`, 
    props: ['question'] 
}); 

私はあなたのコードを更新し、あなたがしようとprev機能を作成できるようにnext機能を実装しました。もちろん、これをもう少しきれいにする必要があります。たぶん質問オブジェクトにプロパティを追加して、inputの型を設定できるようにしてください。それを再利用可能にするようなもの。

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

Answer 2

複数のものがある場合は、配列を使用してループで処理してみてください。この場合、ループは必要ありませんが、覚えておく必要があります。

一度に1つの質問だけをレンダリングする必要があるので、計算されたプロパティを使用して、いくつかのインデックスに基づいて現在の質問を検索してください。このインデックスは、次/前のボタンで増減します。

この形式のコードでは、質問を追加する必要がある場合は、配列に追加するだけで済みます。あなたは調査の質問のためにあなたが簡単に複数の異なる質問を作成することができる方法ですVueのコンポーネントを作成するをご覧ください

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

})