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

并且模板已经正确渲染，结果：Result rendered

当用户select每题一个答案时，我会得到select每题的答案值到后台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 数组。

这是一个快速 fiddle：https://jsfiddle.net/m0nk3y/zrum4nts/

要查看 answers 数组的内容，您必须打开浏览器控制台。

从 Vue.js 中的 ul 列表中获取选中的选中值

Get the selected checked value from the ul list in Vue.js

html

javascript

vue.js

vuejs2