從Vue.js的ul列表中獲取選定的檢查值

Question

我打算在項目中使用Vue.js。 但是，我不知道如何從動態API數據獲取ul列表中的檢查值 ？

getQuestion API如下所示：

{

 "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"
      }
    ]
  },

}

在html中，模板為：

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

並且模板已經正確渲染，結果是： 結果已渲染

當用戶選擇每個問題的一個答案時，我會將每個問題的所選答案值的值提供給后端API。 但是我不知道如何從動態API數據獲取ul列表中的檢查值 ？ 我認為這個問題已經很長時間了，但是還是不知道。

Answer 1

一種方法是將問題編號和所選答案保存在數組中。

在HTML上，我添加了一個v-on:change傳遞問題編號和答案，如下所示：

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

我還在數據中添加了一個answers數組，以存儲選定的答案。 然后，我添加了一個方法selectAnswer到數據推送到該陣列answers ，像這樣：

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

一旦用戶完成問卷並點擊Submit ，您要做的就是傳遞answers數組。

這是一個快速的小提琴： https : //jsfiddle.net/m0nk3y/zrum4nts/

要查看answers數組的內容，您必須打開瀏覽器控制台。