<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/[email protected]/lib/index.css">
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/npm/[email protected]/lib/vant.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<div id="Vue">
<div v-for="item in listTwo">
<p>{{item.title}}</p>
<van-checkbox-group v-model="item.val" v-for="val in item.duoxuan">
<van-checkbox :name="val.name">{{val.text}}</van-checkbox>
</van-checkbox-group>
</div>
<button @click="qcdx">
取出多选{{ttt}}
</button>
</div>
</body>
<script>
new Vue({
el:"#Vue",
data:{
ttt:'',
result: [],
listTwo:[
{
title:"多选1",
val:[],
id:4,
duoxuan:[
{
name:"a",
text:'复选框 a'
},
{
name:"b",
text:'复选框 b'
},
{
name:"c",
text:'复选框 c'
}
]
},
{
title:"多选2",
val:[],
id:5,
duoxuan:[
{
name:"a",
text:'复选框 a'
},
{
name:"b",
text:'复选框 b'
},
{
name:"c",
text:'复选框 c'
}
]
}
]
},
methods:{
qcdx(){
let aaa = {}
for (let i in this.listTwo){
console.log(this.listTwo[i].id)
let asc = this.listTwo[i].id
aaa[asc]=this.listTwo[i].val.toString()
}
console.log(aaa)
}
},
created(){
}
})
</script>
</html>
