如何在vue中循环和创建具有多个子菜单级别的菜单

Question

我使用的是Vue，我有一个对象数组，我需要用它来创建一个菜单。

数组列表如下所示：

[{
    "name": "Menu 1",
    "url": "/link/menu-1",
    "sub-menus": []
},
{
    "name": "Menu 2",
    "url": "/link/menu-2",
    "sub-menus": [
        {
            "name": "Menu 2-1",
            "url": "/link/menu-2-1",
            "sub-menus": []
        },
        {
            "name": "Menu 2-2",
            "url": "/link/menu-2-2",
            "sub-menus": []
        }
    ]
},
{
    "name": "Menu 3",
    "url": "/link/menu-3",
    "sub-menus": [
        {
            "name": "Menu 3-1",
            "url": "/link/menu-2-1",
            "sub-menus": [
                {
                    "name": "Menu 3-1-1",
                    "url": "/link/menu-3-1-1",
                    "sub-menus": []
                }
            ]
        },
        {
            "name": "Menu 3-2",
            "url": "/link/menu-2-2",
            "sub-menus": []
        }
    ]
}]

由于有多个子菜单级别，我不知道如何动态生成菜单。

子菜单的级别不是固定的。它可以是无子菜单，也可以是2级或3级以上。

我希望输出结果如下所示。

<ul>
<li>
    <a href="/link/menu-1">Menu 1</a>
</li>
<li>
    <a href="/link/menu-2">Menu 2</a>
    <ul>
        <li>
            <a href="/link/menu-2-1">Menu 2-1</a>
        </li>
        <li>
            <a href="/link/menu-2-2">Menu 2-2</a>
        </li>
    </ul>
</li>
</ul>

由于我是Vue的新手，我不知道如何实现这一点。提前谢谢。

Answer 1

我认为你可以用两个组件来实现。

它将为自己和它的子菜单构建一个菜单：

var Menu = ({
  name:"Menu",

  template: `
    <li>
        <a :href="url">{{name}}</a>

        <ul v-if="subMenus.length > 0">
          <Menu 
            v-for="menu in subMenus" 
            :name="menu.name" 
            :url="menu.url" 
            :subMenus="menu['sub-menus']">
          </Menu>
        </ul>
    </li>`,

  props: {
    name:     {type:String, required:true},
    url:      {type:String, required:true},
    subMenus: {type:Array, required:true}
  }
})

另一个用来遍历所有内容，它将遍历您的菜单列表(您将作为一个道具传递)：

var FullMenu = ({ 
  components: {Menu},

  name:"FullMenu", 

  template: `
    <div>
      <ul>
        <Menu 
          v-for="menu in menus" 
          :name="menu.name" 
          :url="menu.url" 
          :subMenus="menu['sub-menus']">
        </Menu>
      </ul>
    </div>
    `,

  props: {
    menus: {type:Array, required:true}
  }
})

就像这样使用它：

<div>
  <full-menu :menus="yourMenuListAsDataOrProps"></full-menu>
</div>`

下面是一个关于Observable的运行示例：https://observablehq.com/d/802261a535698d88#FullMenu

Answer 2

我用下面的方法解决了这个问题：

在模板部分=>中使用它

<span v-html="hasChild(chart)"></span>

和hasChild方法=>

hasChild(chart){
  var html = ''
  if(chart.childs.length>0){
    html = html+'<ul>'
    chart.childs.map(child=>{
      html = html+'<li>'
      html = html+'<a>'+child.title+'</a>'
      if(child.childs.length>0){
        html = html+this.hasChild(child)
      }
      html = html+'</li>'
    })
    html = html+'</ul>'
    return html
  }
}

对我来说很好。