Javascript 获取对象或数组的深度
我得到了类似这样的数据,并说我得到了无穷大的群的深度 data/group.data.jsonJavascript 获取对象或数组的深度,javascript,vue.js,vuejs2,Javascript,Vue.js,Vuejs2,我得到了类似这样的数据,并说我得到了无穷大的群的深度 data/group.data.json module.exports = [ { id: '1', title: 'Awesome Group', type: '1', groups: [ { id: '5', title: 'Child in Level Two - A', type: '2', groups: [
module.exports = [
{
id: '1',
title: 'Awesome Group',
type: '1',
groups: [
{
id: '5',
title: 'Child in Level Two - A',
type: '2',
groups: [
{
id: '6',
title: 'Child in Level Three - A',
type: '2',
},
{
id: '8',
title: 'Child in Level Three - B',
type: '2',
}
]
},
{
id: '7',
title: 'Child in Level Two - B',
type: '2',
}
]
},
{
id: '2',
title: 'Rockers',
type: '2',
},
{
id: '3',
title: 'Dazzlers',
type: '3',
}
];
我无法像下面那样手动完成这项工作,如何动态地迭代到最后
<ul class="list-group list-group-flush">
<template v-for="group in groupData">
<a class="list-group-item" href="#">
<h6>{{group.title}}</h6>
</a>
<template v-for="group in group.groups">
<a class="list-group-item pl-40" href="#">
<h6>{{group.title}}</h6>
</a>
<template v-for="group in group.groups">
<a class="list-group-item pl-60" href="#">
<h6>{{group.title}}</h6>
</a>
</template>
</template>
</template>
</ul>
<script>
let groupData = require('../data/group.data');
export default {
data () {
return {
groupData,
}
}
}
</script>
让groupData=require('../data/group.data');
导出默认值{
数据(){
返回{
分组数据,
}
}
}
有一个答案有点像我想要的,但不确定如何在我的例子中使用:一个解决方案就是在其模板中引用组件本身。只要没有太多的元素,它应该是完美的。与此功能相关的唯一限制是为组件指定名称。当您全局注册组件时,这将自动完成。否则,只需在组件对象中指定属性名称 有关更完整的解释,请参阅 此外,还必须指定要在模板中的组件上循环的属性 最后,这里是您的工作示例:
const tree=[{id:“1”,title:“Awesome Group”,type:“1”,groups:[{id:“5”,title:“二级儿童-A”,type:“2”,title:“三级儿童-A”,type:“2”},{id:“8”,title:“三级儿童-B”,type:“2”},{id:“二级儿童-B”,type:“2”},{id:“2”,title:“摇滚者”,type:“2”},{id:“3”,title:“炫目者”,type:“3”};
Vue.组件('组'{
名称:'组',
模板:`
`,
道具:['value','deep']
});
新Vue({
el:“#应用程序”,
数据:{
树
}
});代码>
我认为使用N维数组是不太实际的,其中N>3。您应该尝试重新构造数据结构。您应该研究如何编写递归组件: