javascript - Vuejs 嵌套循环 3 级子菜单

Question

演示链接https://jsfiddle.net/Hani_Gerges/bzec0sgu/18/ 我有一个像这样的对象

{
   "Master Records":{
      "null":[
         {
            "level1Title":"Master Records",
            "level2Title":null,
            "title":"Departments",
            "pageUrl":"/Departments/DepartmentsList",
            "description":null,
            "roles":null
         }
      ]
   },
   "Legal":{
      "null":[
         {
            "level1Title":"Legal",
            "level2Title":null,
            "title":"Law Offices",
            "pageUrl":null,
            "description":null,
            "roles":null
         }
      ]
   },
   "Social Media":{
      "null":[
         {
            "level1Title":"Social Media",
            "level2Title":null,
            "title":"Twitter",
            "pageUrl":"https://twitter.com",
            "description":"Twitter",
            "roles":null
         },
         {
            "level1Title":"Social Media",
            "level2Title":null,
            "title":"Facebook",
            "pageUrl":"https://facebook.com",
            "description":null,
            "roles":null
         }
      ]
   },
   "null":{
      "null":[
         {
            "level1Title":null,
            "level2Title":null,
            "title":"Contact Us",
            "pageUrl":"/ContactUs/ContactUs",
            "description":"Contact Us",
            "roles":null
         },
         {
            "level1Title":null,
            "level2Title":null,
            "title":"About Us",
            "pageUrl":"/AboutUs",
            "description":null,
            "roles":null
         }
      ]
   }
}

我正在尝试循环播放以获取正确的菜单

这是我的代码

 <div class="navbar-content scroll-div">
            <ul class="nav pcoded-inner-navbar">
                <li class="nav-item pcoded-hasmenu">
                    <template v-for="(level1Title, Key) in level1Items" :Key="Key" v-if="Key !='null'">
                        <a class="nav-link "><span class="pcoded-micon"><i class="mdi mdi-contacts"></i></span><span class="pcoded-mtext">{{Key}}</span></a>
                        <ul class="pcoded-submenu">
                            <li class="pcoded-hasmenu" v-for="(level2Title, Key) in level1Title" :Key="Key" v-if="Key !='null'">
                                <a class="">
                                    <span class="pcoded-micon"><i class="mdi mdi-contacts"></i></span>
                                    <span class="pcoded-mtext">{{Key}}</span>
                                </a>
                                <ul class="pcoded-submenu">
                                    <li class="" v-for="(title, Key) in level2Title" :Key="Key" v-show="On">
                                        <a :href="title.pageUrl" class="">
                                            <span class="pcoded-micon"><i class="mdi mdi-contacts"></i></span>
                                            <span class="pcoded-mtext">{{title.title}}</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-item active pcoded-trigger" v-for="(level1Title, Key) in level1Items" :Key="Key" v-if="Key !='null'">
                                <ul class="nav pcoded-inner-navbar" v-for="(level2Title, Key) in level1Title" :Key="Key" v-if="Key =='null'">
                                    <li class="nav pcoded-inner-navbar" v-for="(title, Key) in level2Title" :Key="Key">
                                        <a :href="title.pageUrl" class="nav-link">
                                            <span class="pcoded-micon"><i v-bind:class=IconName></i></span>
                                            <span class="pcoded-mtext">{{title.title}}</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </template>
                </li>
            </ul>

            <ul class="nav pcoded-inner-navbar">
                <li class="nav-item active pcoded-trigger" v-for="(level1Title, Key) in level1Items" :Key="Key" v-if="Key =='null'">
                    <ul class="nav pcoded-inner-navbar" v-for="(level2Title, Key) in level1Title" :Key="Key" v-if="Key =='null'">
                        <li class="nav pcoded-inner-navbar" v-for="(title, Key) in level2Title" :Key="Key">
                            <a :href="title.pageUrl" class="nav-link">
                                <span class="pcoded-micon"><i v-bind:class=IconName></i></span>
                                <span class="pcoded-mtext">{{title.title}}</span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

我的问题是，当没有找到 level2 标题时，它会重复每个菜单中的所有项目，就像我在菜单中打开第一个项目一样，我发现其中的所有标题，即使它只有 1 个标题，

我有 2 个单独的 UL 来获得没有级别 1 或 2 的级别 3 项目，而另一个 UL 获得级别 1 => 级别 2（如果不是 null）=> 级别 3

像这个屏幕在这里输入图像描述

标签： javascriptloopsvue.jsobject