Use v-for nested traversal in vue project to realize vux component Tab tab content switching

first slide

the second one

third

<div class="classify">
            <tab>
                <tab-item v-for="(title,index) in tabTitle" :key="title.index" @on-item-click="onItemClick(index)">{
   
   {title}}</tab-item>
                //使用v-for遍历标题
            </tab>
        </div>

        <div class="content">
            <div v-for="(item,index) in list" v-show="index==num" v-bind:key="item.index">
                <div v-for="(content) of item" v-bind:key="content.id" class="news">
                //此处为嵌套遍历，你也可以用使用child子数组
                //<div v-for=(content) of list.child....当然data中的数组也要相应发生改变
                    <img class="newsImg"  src="content.src" alt="">
                    <div class="newsText">
                        <div class="newsTitle">
                            <span>{
   
   {content.title}}</span><br>
                            <span>{
   
   {content.desc}}</span>
                        </div>
                    </div>
                    </div>
                 </div>
        </div>

method(){
onItemClick(index) {
                this.num = index;
                console.log(this.num);
                console.log('on item click:', index)
                }
            },
 data(){
     return{
 list: [[{
                    id:'0',
                    src: 'http://somedomain.somdomain/x.jpg',
                    fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
                    title: '标题一',
                    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
                    url: ''},
                    {
                        id:'1',
                        src: 'http://somedomain.somdomain/x.jpg',
                        fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
                        title: '标题二',
                        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
                        url: ''},
                    {
                        id:'2',
                        src: 'http://somedomain.somdomain/x.jpg',
                        fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
                        title: '标题三',
                        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
                        url: ''}

                ],
                    [{
                        id:'0',
                        src: 'http://somedomain.somdomain/x.jpg',
                        fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
                        title: '标题四',
                        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
                        url: ''},
                        {
                            id:'1',
                            src: 'http://somedomain.somdomain/x.jpg',
                            fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
                            title: '标题五',
                            desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
                            url: ''},
                        {
                            id:'2',
                            src: 'http://somedomain.somdomain/x.jpg',
                            fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
                            title: '标题六',
                            desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
                            url: ''},

                    ],
                    [{
                        id:'0',
                        src: 'http://somedomain.somdomain/x.jpg',
                        fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
                        title: '标题七',
                        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
                        url: ''},
                        {
                            id:'1',
                            src: 'http://somedomain.somdomain/x.jpg',
                            fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
                            title: '标题八',
                            desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
                            url: ''},
                        {
                            id:'2',
                            src: 'http://somedomain.somdomain/x.jpg',
                            fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
                            title: '标题九',
                            desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
                            url: ''},

                    ],

                ],

                	 tabTitle:['热点政策','公司资讯','招聘信息'],
                    num:0,
                    }
         }
        

				tabTitle:['热点政策','公司资讯','招聘信息'],
                num:0,

The title array in the data, as well as the initial value of num, are written in the data. I don’t know why, but the code is not fully displayed.
The array in the data is a bit confusing here. In fact, there is an array embedded in the array. I don’t know if you have a better way. Welcome to guide

In this way, the content switching is realized. This project is written by vue plus vux components.
All the above codes are written in the same vue component.