v-for实现双层循环嵌套

html

 1 <div>
 2                 <ul v-for="(item,index) in list" :key="index">
 3                     <li>
 4                         {{ item.name }}
 5                         <ul v-for="(i,cindex) in list[index].chrildList" :key="cindex">
 6                             <li>{{ i.chrildName }}</li>
 7                         </ul>
 8                     </li>
 9                 </ul>
10 </div>

数据：

<script>
    export default {
        name: "home",
        data() {
            return{
                list: [{
                        name: '权限管理', chrildList:[
                            {chrildName:'添加管理员'},
                            {chrildName:'添加角色'｝]
                    }, {
                        name: '商品管理', chrildList:[
                            {chrildName:'商品管理'}]
                    },{
                        name: '分类管理',
                    }, {
                        name: '优惠券管理', 
                    }, {
                        name: '积分管理', 
                    }, {
                        name: '订单管理', 
                    }, {
                        name: '数据统计', 
                    },  {
                        name: '操作记录', 
                    },{
                        name: '客服中心', 
                    }],
            }
        },
    }
</script>

< div >

                 < ul  v-for="( item, index)  in  list" : key=" index" >

                     < li >

                        {{  item. name }}

                         < ul  v-for="( i, cindex)  in  list[ index]. chrildList" : key=" cindex" >

                             < li >{{  i. chrildName }} </ li >

                         </ ul >

                     </ li >

                 </ ul >

             </ div >