从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数组的内容，您必须打开浏览器控制台。