[英]Get the selected checked value from the ul list in Vue.js
I am tring to use Vue.js in my project. 我打算在项目中使用Vue.js。 But, I do not know how to get the checked value in ul list from the dynamic API data ?
但是,我不知道如何从动态API数据获取ul列表中的检查值 ?
The getQuestion API is like this: 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"
}
]
},
}
In html, the template is: 在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>
And the template had already rendered correctly, the result: Result rendered 并且模板已经正确渲染,结果是: 结果已渲染
When the user select one answer of every question, I will get the value of the selected answer value of every question to the backend API. 当用户选择每个问题的一个答案时,我会将每个问题的所选答案值的值提供给后端API。 But I do not know how to get the checked value in ul list from the dynamic API data ?
但是我不知道如何从动态API数据获取ul列表中的检查值 ? I think for this problem for a long time, but still have no idea.
我认为这个问题已经很长时间了,但是还是不知道。
One approach is to save the question number and the selected answer in an array. 一种方法是将问题编号和所选答案保存在数组中。
On the HTML, I added a v-on:change
passing the question number and answer like so: 在HTML上,我添加了一个
v-on:change
传递问题编号和答案,如下所示:
<input type="radio"
v-on:change="selectAnswer(quesItem.questionNo,answerItem.answerNo)"/>
I also added an answers
array in the data to store the selected answers. 我还在数据中添加了一个
answers
数组,以存储选定的答案。 Then, I added a method selectAnswer
to push the data to the array answers
, like so: 然后,我添加了一个方法
selectAnswer
到数据推送到该阵列answers
,像这样:
new Vue({
el: '#ques_container',
data: {
question: [...],
answers: []
},
methods: {
selectAnswer: function(qNo, qAns) {
this.answers[qNo] = qAns;
}
}
});
Once the user completes the questionnaire and hits Submit
, all you'll have to do is pass the answers
array. 一旦用户完成问卷并点击
Submit
,您要做的就是传递answers
数组。
Here's a quick fiddle: https://jsfiddle.net/m0nk3y/zrum4nts/ 这是一个快速的小提琴: https : //jsfiddle.net/m0nk3y/zrum4nts/
To view the contents of the answers
array, you'll have to open your browser console. 要查看
answers
数组的内容,您必须打开浏览器控制台。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.