vue 树状的数据怎么v-for渲染？

Z时代
2024-03-01
分类：IT

vue 树状的数据怎么v-for渲染？

数据层级有很多层，也不能确定几层，请问怎么渲染出来呢，谢谢？

<div v-for="(item, index) in data">
    <div class="name">{{item.name}}</div>
    <div class="children" v-for="(itemSon, index) in item.children">
        <div class="name">{{itemSon.name}}</div>
        ...
        ...
        ...
    </div>
</div>
data = [
  {
    name: "About",
    path: "/about",
    children: [
      {
        name: "About US",
        path: "/about/us"
      },
      {
        name: "About Comp",
        path: "/about/company",
        children: [
          {
            name: "About Comp A",
            path: "/about/company/A",
            children: [
              {
                name: "About Comp A 1",
                path: "/about/company/A/1"
              }
            ]
          }
        ]
      }
    ]
  },
  {
    name: "Link",
    path: "/link"
  }
];