vue 多层循环，包含tab切换

需实现功能：

1.多层循环

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

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

 如图所示：

 

 

 

 

html部分

<div class="box" v-for="(items,index) in list" :key="index">
                    <div class="box-top">
                        <div class="box-left">
                            <img :src="items.img"/>
                            <span>{{items.title}}</span>
                        </div>
                        <div class="more" ref="more" @click="loadMore(index)">查看更多</div>
                    </div>
                    
                    <div v-if="items.tab && items.tab.length>0" >
                        <div class="tab">{{items.current}}
                            <div class="tab-ceil"  ref="tabs" v-for="(item,menu_index) in items.tab" :key="menu_index" :class="items.current == menu_index?'active':''" @click="tabFun(index,menu_index)">
                                <img v-if="items.current == menu_index" :src="item.actImg"/>
                                <img v-else :src="item.img"/>
                                <span>{{item.text}}</span>
                            </div>
                        </div>
                        <div class="list" ref="list">
                            <div class="list-ceil" v-for="(ite,ind) in items.imgs[items.current].info" :key="ind">
                                <img :src="ite"/>
                            </div>
                        </div>
                    </div>
                    <div class="list" v-else ref="list" >
                        <div class="list-ceil" v-for="(item,img_index) in items.imgs" :key="img_index">
                            <img :src="item"/>
                        </div>
                    </div>
                </div>
                

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