<view class="group" v-for="(item,index) in listaaa" :key="index">
<view class="title"><text class="uni-form-item__title">{{item.name}}</text></view>
<view v-for="(time,tindex) in item.timelist" :key="tindex">
<radio-group class="radio-group" @change='changeaaaa(index,tindex)' >
<label class="radio" >
<radio :value="time.name" :checked="time.checked" />
{{time.name}}
</label>
</radio-group>
</view>
</view>
listaaa:[{
name:'打球',
id:1,
timelist:[
{
name:'1小时',
tid:1
},
{
name:'2小时',
tid:2,
}
]
},
{
name:'游泳',
id:2,
timelist:[
{
name:'1小时',
tid:1,
},
{
name:'2小时',
tid:2
}
]
}],
changeaaaa(index,tindex){
this.listaaa[index].timelist = this.listaaa[index].timelist.map((x,i)=>{
if(i === tindex){
x.checked = true
}else{
x.checked = false
}
return x
})
const map1 = this.listaaa.map(x =>{
const map2 = x.timelist.filter(a => {
if(a.checked){
return a
}
})
return map2
});
console.log('数据',map1);
},
先把代码奉上:
1.根据数据结构 写出页面的循环
2.根据 checked的值 来在页面回显是否被选中 每次都要把选中的赋值成true 没选中的赋值成 false
这一部很关键,对应的代码是
this.listaaa[index].timelist = this.listaaa[index].timelist.map((x,i)=>{
if(i === tindex){
x.checked = true
}else{
x.checked = false
}
return x
})
3.把所有checked 为 true的数据筛选出来
const map1 = this.listaaa.map(x =>{
const map2 = x.timelist.filter(a => {
if(a.checked){
return a
}
})
return map2
});