Vue.Js異なるタイプの複数の入力

Question

私はVueを使ったアンケートに取り組んでいます。私はすべての質問とそれらをナビゲートし、一度に1つずつ表示するためのインデックスの配列を使用しています。私は各質問に異なる入力タイプを使用しています。数字、ラジオ、テキストなどです。いくつかの質問については、複数の入力が必要です。私はv-bindを使って質問のタイプを渡しています。

ここで私が遭遇する問題は、質問ごとに複数の入力が必要になることです。ラジオボタンを渡すとき、私は2 +が必要なときにだけ私は1つを得る。ボタンのラベルと同じです。私は、いくつかの質問（例えば、入力番号とラジオの両方）について2つの異なる入力タイプが必要になることに気付きました。

This is my working fiddleあなたが私が達成しようとしていることのアイデアを教えてください。私はこれが私の現在のアプローチで実現可能かどうか、あるいは質問のためにコンポーネントを使用し、それぞれに異なるテンプレートを使用する必要があるかどうか、どのようにそれをやっていくのかを知りたいと思います。

初めてエラーが発生してからメモリから2回目の書き込みをしていますので、何か重要なことに言及しなかった場合はお詫びします。前もって感謝します！

new Vue({ 
    el: '#quizz', 
    data: { 
    questions:[ 
     {question: 'What is your gender?', answer: '', type: 'radio', checked: 'true', label: 'Male'}, 
     {question:'How old are you?', answer: '', type: 'number', checked: 'false'}, 
     {question:'How many times do you workout per week?', answer: '', type: 'number', checked: 'false'}, 
    ], 
    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 1

質問型のコンポーネントを作成することでこれを処理することができます。たとえば、

const RadioQuestion = { 
    props:["value", "question"], 
    template:` 
     <div> 
      <template v-for="label in question.labels"> 
       <input type="radio" :id="label" :value="label" v-model="picked"> 
       <label :for="label">{{label}}</label> 
       <br>   
      </template> 
     </div> 
    `, 
    data(){ 
     return { 
      picked: this.value 
     } 
    }, 
    watch:{ 
     picked(){ 
      this.$emit("input", this.picked) 
     } 
    } 
} 

const NumericInputQuestion = { 
    props:["value", "question"], 
    template:` 
     <div> 
      <input type="number" v-model="internalValue" @input="onInput" :value="value" /> 
     </div> 
    `, 
    data(){ 
     return { 
      internalValue: this.value 
     } 
    }, 
    methods:{ 
     onInput(){this.$emit("input", this.internalValue)} 
    } 

} 

次に、このようなデータを作成します。

data: { 
    questions:[ 
    {question: 'What is your gender?', type: RadioQuestion, labels:["Male", "Female"], answer: null}, 
    {question:'How old are you?', type: NumericInputQuestion, answer: null}, 
    {question:'How many times do you workout per week?', type: NumericInputQuestion, answer: null} 
    ], 
    index:0 
} 

それに応じてテンプレートを修正してください。

<div id="quizz" class="question"> 
    <h2> 
     {{ currentQuestion.question }} 
    </h2> 
    <component :key="currentQuestion" :is="currentQuestion.type" :question="currentQuestion" v-model="currentQuestion.answer"></component> 
    Current Question Answer: {{ currentQuestion.answer }} 
    <div class='button' id='next'><a href='#' @click="next">Next</a></div> 
    <div class='button' id='prev'><a href='#' @click="previous">Prev</a></div> 
</div> 

ここでは、テクニックを示すfiddleが更新されています。