vue怎么把数据生成成树形菜单

Question

这个是数据，我不知道里面会套几层，该怎么来循环出来呢

  list:[
    {
      name:'分组一',
      list:[
        {
          name:'分组1-1',
          list:[
            {
              name:'分组1-1-1'
            },
            {
              name:'分组1-1-2'
            }
          ]
        },
        {
          name:'分组1-2',
          list:[
            {
              name:'分组1-2-1'
            },
            {
              name:'分组1-2-2'
            }
          ]
        }
      ]
    }
  ]

就像下面这样的先简单的把数据渲染出来，该怎么弄呢？

Answer 1

递归组件，vue官网有教程

index.vue

<template>
   <menu-tree v-for="item in list" :data="item" :key="item"></menu-tree>
</template>
<script>
    import menuTree from './tree';
    export default {
        props: {
            data: [Object],
        },
        data() {
            return {
                list:[
                    {
                      name:'分组一',
                      list:[
                        {
                          name:'分组1-1',
                          list:[
                            {
                              name:'分组1-1-1'
                            },
                            {
                              name:'分组1-1-2'
                            }
                          ]
                        },
                        {
                          name:'分组1-2',
                          list:[
                            {
                              name:'分组1-2-1'
                            },
                            {
                              name:'分组1-2-2'
                            }
                          ]
                        }
                      ]
                    }
                  ]'
            }
        },
    }
</script>

tree.vue

<template>
    <li>
        <ul v-if="hasMenu">
            <menu-tree v-for="item in data.list" :data="item" :key="item"></menu-tree>
        </ul>
    </li>

</template>

<script>
    export default {
        props: {
            data: {
                type: [Object]
            }
        },
        computed: {
            hasMenu: {
                get: function() {
                    return this.data.list && this.data.list.length > 0;
                }
            }
        },
    }

</script>

Answer 2

递归组件，你看我刚提了一个问题，里面实现了

Answer 3

div(v-for="aitem in ist") {{aitem.name}}
   div(v-for="bitem in aitem.list") {{bitem.name}}
        div(v-for="citem in bitem.list") {{citem.name}}
            ...