vue 多层循环，包含tab切换

需实现功能：

1.多层循环

2.每层循环包含（或不包含）tab 切换

3.tab切换，每层循环是独立的。

 如图所示：

html部分

for="(items,index) in list" :key="index">
                    

                        

                            
                            {{items.title}}
                        
                        
查看更多
                    
                    
                    
if="items.tab && items.tab.length>0" >
                        
{{items.current}}
                            
for="(item,menu_index) in items.tab" :key="menu_index" :class="items.current == menu_index?'active':''" @click="tabFun(index,menu_index)">
                                if="items.current == menu_index" :src="item.actImg"/>
                                else :src="item.img"/>
                                {{item.text}}
                            
                        
                        

                            
for="(ite,ind) in items.imgs[items.current].info" :key="ind">
                                
                            
                        
                    
                    
else ref="list" >
                        
for="(item,img_index) in items.imgs" :key="img_index">
                            
                        
                    
                
                

js部分中的data

list:[
                    {
                        title:'境内用卡优惠集锦',
                        img:'img/icon_food.png',
                        current:0, //单个循环中，tab的选中值
                        tab:[ //每个tab对应img下面的info
                            {img:"img/icon_s_1.png",actImg:'img/icon_s_1_act.png',text:'出行类'},
                            {img:"img/icon_s_2.png",actImg:'img/icon_s_2_act.png',text:'餐饮类'},
                            {img:"img/icon_s_3.png",actImg:'img/icon_s_3_act.png',text:'商超类'},
                            {img:"img/icon_s_4.png",actImg:'img/icon_s_4_act.png',text:'新客类'},
                        ],
                        imgs:[
                            {info:['img/card1.jpg','img/img1.png','img/img1.png','img/img1.png']},
                            {info:['img/img1.png','img/img1.png','img/img1.png','img/img1.png']},
                            {info:['img/img1.png','img/img1.png','img/img1.png','img/img1.png']},
                            {info:['img/card1.jpg','img/img1.png','img/img1.png','img/img1.png']},
                        ]
                    },
                    {
                        title:'跨境用卡优惠集锦',
                        img:'img/icon_star.png',
                        current:0,
                        tab:[
                            {img:"img/icon_s_1.png",actImg:'img/icon_s_1_act.png',text:'出行类'},
                            {img:"img/icon_s_2.png",actImg:'img/icon_s_2_act.png',text:'餐饮类'},
                            {img:"img/icon_s_3.png",actImg:'img/icon_s_3_act.png',text:'商超类'},
                            {img:"img/icon_s_4.png",actImg:'img/icon_s_4_act.png',text:'新客类'},
                        ],
                        imgs:[
                            {info:['img/img1.png','img/img1.png','img/img1.png','img/img1.png']},
                            {info:['img/img1.png','img/img1.png','img/img1.png','img/img1.png']},
                            {info:['img/img1.png','img/img1.png','img/img1.png','img/img1.png']},
                            {info:['img/img1.png','img/img1.png','img/img1.png','img/img1.png']},
                        ]
                    },
                    {
                        title:'其他活动',
                        img:'img/icon_gift.png',
                        imgs:['img/img1.png','img/img1.png','img/img1.png','img/img1.png','img/img1.png','img/img1.png']
                    },
                    {
                        title:'热卡推荐',
                        img:'img/icon_card.png',
                        imgs:['img/card1.jpg','img/card2.jpg']
                    },
                ],

js中的切换方法（根据index改变list中item对应的current值）

tabFun(index,menu_index){
                    this.$nextTick(function(){
                        this.list.map((item,i)=>{
                            if(i ==index){
                                item.current = menu_index
                            }
                        })
                    });
                }