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

我正在使用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的新手，我不知道如何实现这一点。提前谢谢。

我想你可以用两个组件来完成

一个将为自己及其子菜单构建菜单的菜单：

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菜单=({
名称：“菜单”，
模板：`



`，
道具：{
名称：{type:String，必需：true}，
url:{type:String，必需：true}，
子菜单：{type:Array，必需：true}
}
})

还有一个可以让一切都疯狂，它会在你的菜单列表上迭代（你将作为道具通过）：

var FullMenu=（{
组件：{Menu}，
名称：“全菜单”，
模板：`


`,
道具：{
菜单：{type:Array，必需：true}
}
})

就像这样使用它：

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

`

---

下面是一个关于Observable的运行示例：

我通过以下方式解决了这个问题：

在模板部分使用此选项=>

<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
  }
}

hasChild（图表）{
var html=''
如果（图表长度>0）{
html=html+“
”
chart.childs.map（child=>{
html=html+“
”
html=html+''+子.title+''
if（child.child.length>0）{
html=html+this.hasChild（child）
}
html=html+'
'
})
html=html+'
'
返回html
}
}

---

对我来说很好。

谢谢。我会试试你的方法，让你知道。

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
  }
}