Vue.jsのulリストから選択したチェック値を取得

Question

私のプロジェクトでVue.jsを使用する傾向があります。しかし、私はどのように動的APIデータからulリストのチェック値を取得するのか分からない？

getQuestion APIは、このようなものです：

 <div class="ques-container" id="ques_container"> 
     <template v-for="(quesItem,index) in question"> 
      <div class="ques-item"> 
       <p class="title">{{index+1}}.{{quesItem.title}}</p> 
       <ul class="answer-group" > 
        <template v-for="(answerItem,index) in quesItem.answer"> 
         <li><input type="radio" :id="index+quesItem.questionNo" 
            :name="quesItem.questionNo" 
            :value="{questionNo:quesItem.questionNo,answerNo:answerItem.answerNo}"/><label 
           :for="index+quesItem.questionNo"><span></span>{{answerItem.answerContent}}</label> 
        </template> 
       </ul> 
      </div> 
     </template> 
    </div> 

そしてテンプレートはすでに、正しく結果にレンダリングしていた：HTMLで

{ 

"code": 0 
"data": { 
"question": [ 
    { 
    "title": "Whick country are you in", 
    "questionNo": "30", 
    "answer": [ 
     { 
     "answerNo": 1, 
     "answerContent": "United States" 
     }, 
     { 
     "answerNo": 2, 
     "answerContent": "China" 
     }, 
     { 
     "answerNo": 3, 
     "answerContent": "Canada" 
     }, 
     { 
     "answerNo": 4, 
     "answerContent": "Japan" 
     }, 
     { 
     "answerNo": 5, 
     "answerContent": "England" 
     } 
    ] 
    }, 
    { 
    "title": "What Programming Language Should a Beginner Learn？", 
    "questionNo": "37", 
    "answer": [ 
     { 
     "answerNo": 1, 
     "answerContent": "Python" 
     }, 
     { 
     "answerNo": 2, 
     "answerContent": "JavaScript" 
     }, 
     { 
     "answerNo": 3, 
     "answerContent": "Java" 
     }, 
     { 
     "answerNo": 4, 
     "answerContent": "PHP" 
     }, 
     { 
     "answerNo": 5, 
     "answerContent": "Ruby" 
     } 
    ] 
    }, 

} 

、テンプレートがあるResult rendered

ユーザーはすべての質問に対して1つの回答を選択し、すべての質問の選択された回答値の値をバックエンドAPIに取得します。しかし、私は動的APIデータからulリストのチェック値を取得する方法を知らないのですか？私はこの問題を長い間考えていますが、まだ分かりません。

Answer 1

質問番号と選択回答を1つの方法で保存する方法があります。 HTMLで

、私は質問番号を渡すv-on:changeを追加しましたので、同じように答える：

<input type="radio" 
    v-on:change="selectAnswer(quesItem.questionNo,answerItem.answerNo)"/> 

私はまた、選択した答えを格納するためのデータでanswers配列を追加しました。その後、私はそうのように、配列answersにデータをプッシュする方法selectAnswerを追加しました：ユーザーがアンケートを完了し、Submitを打つ

new Vue({ 
    el: '#ques_container', 
    data: { 
    question: [...], 
    answers: [] 
    }, 
    methods: { 
    selectAnswer: function(qNo, qAns) { 
     this.answers[qNo] = qAns; 
    } 
    } 
}); 

たら、あなたがしなければならないだろう、すべてはanswers配列を渡しています。

は、ここでは簡単フィドルます：https://jsfiddle.net/m0nk3y/zrum4nts/

がanswers配列の内容を表示するには、ブラウザのコンソールを開く必要があります。