v-for實現雙層循環嵌套

html

<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>

數據：

<script>
    export default {
        name: "home",
        data() {
            return{
                list: [{
                        name: '權限管理', chrildList:[
                            {chrildName:'添加管理員'},
                            {chrildName:'添加角色'｝]
                    }, {
                        name: '商品管理', chrildList:[
                            {chrildName:'商品管理'}]
                    },{
                        name: '分類管理',
                    }, {
                        name: '優惠券管理', 
                    }, {
                        name: '積分管理', 
                    }, {
                        name: '訂單管理', 
                    }, {
                        name: '數據統計', 
                    },  {
                        name: '操作記錄', 
                    },{
                        name: '客服中心', 
                    }],
            }
        },
    }
</script>