小程序radiogroup循环

<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
                    });