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

我认为您可以通过两个组件来做到这一点。

将为其自身构建菜单的子菜单：

 keeptemp  =  myalerts['Temp'].str.split('    ', expand = True)

还有另一个实例化所有内容，它将遍历您的菜单列表（您将作为道具通过）：

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

以下是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
  }
}

对我来说很好。

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

2 个答案: