将多问卷(单选)选择结果记录在数组中(Vue),并设置选项的选中样式
html代码:
<div class="question"
v-for="(item, index) in questionArr" //遍历存放问题的数组
:key="index" //设置key属性
>
<p>{
{item['title']}}</p> //问题内容
<p
v-for="(obj, ind) in item['options']" //遍历选项
:key="ind" //key属性
@click='doQuestion(index,ind)' //给整个p标签绑定点击事件,传递当前问题和选项的索引,切换选项
:class="{active:(answerArr[index]==ind)}"// 激活样式,由数组内的第(当前问题的索引值)个的值和自身选项的索引值是否相等确定
>
<img :src="answerArr[index]==ind?'对勾.png':'未选.png'" alt="" >
//自定义单选框,根据选择状态切换图片内容src
<input type="radio" //通常设置隐藏display:none
:name="index" //单选radio的name需设置一样的(题目的索引)
:value="ind" //value值设置为选项的索引,会存在数组中
v-model="answerArr[index]"> //将单选框双向绑定到数组的第(问题索引)个项的值上
{
{obj}} //选项的内容
</p>
</div>
js代码:
new Vue({
el: '#app',
data() {
return {
answerArr: [],
questionArr: [{
//问卷数组
"title": "对很大声音没有反应",
"options": ["123456!", "asdaaaad"]
}, {
"title": "逗引时不发音或不会微笑",
"options": ["zsdaasda", "5555555", "mmmmmmmmmm", '9999']
}, {
"title": "不注视人脸,不追视移动人或物品",
"options": ["123456!", "asdaaaad"]
}, {
"title": "俯卧时不会抬头",
"options": ["zsdaasda", "5555555", "mmmmmmmmmm"]
}]
}
},
methods: {
doQuestion(index, ind) {
this.answerArr.splice(index, 1, ind);//替换 将数组的第index个项的值替换为ind
setTimeout(() => {
//打印数组 ,非必要
console.log(this.answerArr[index]);
console.log(this.answerArr);
}, 0)
}
},
mounted() {
//在页面挂载时,给数组初始化,设置选择都是第一个选项
this.questionArr.map(obj => {
this.answerArr.push(0);
})
console.log(this.answerArr);
},
})