v-for实现双层循环嵌套

Posted 2020-12-20 meiyanstar

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>