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

当用户选择每个问题的一个答案时，我将获得每个问题的所选答案值的值到后端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数组的内容，您必须打开浏览器控制台。

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

1 个答案: