html5 支持v-for吗,vue+element ui v-for怎么生成如下页面

数据格式↓

let data = [{

name:'水果大全',

id:'111',

children:[{

name:'浆果类',

id:'112',

children:[{

name:'草莓',

id:'113'

},{

name:'桑椹',

id:'114'

},{

name:'黑莓',

id:'115'

}]

},{

name:'柑橘类',

id:'116',

children:[{

name:'橘子',

id:'117'

},{

name:'橙子',

id:'118'

}]

}]

},{

name:'奥特曼大全',

id:'119',

children:[{

name:'昭和类',

id:'112',

children:[{

name:'杰克',

id:'113'

},{

name:'泰罗',

id:'114'

},{

name:'艾斯',

id:'115'

}]

},{

name:'平成类',

id:'116',

children:[{

name:'迪迦',

id:'117'

},{

name:'盖亚',

id:'118'

}]

}]

}]

“参考”代码

浆果类

草莓

桑椹

黑莓

柑橘类

橘子

橙子

昭和类

杰克

泰罗

艾斯

平成类

迪迦

盖亚

最终效果↓

请教各位该怎么用v-for、el-form-item、el-tag写出如图所示的效果，因为数据都不是固定的，没法像“参考”代码那样子写死

在这里先谢谢各位大神们的解答，小弟感激不尽！

回答

设置你的数据为data数组,按照数据的特点进行三次循环。

tagType.vue

// 其他代码省略

{{itemChild.name}}

tagChild.vue

{{typeItem.name}}

export default {

props: ['tagData']

data() {

return {

typeItem: {}

}

}

}

这种问题还需要问吗？问这个问题的时间自己去写写估计已经写出来吧？

就是对象的对象嘛，和数组一样的逻辑去处理