Javascript 使用Vue js创建2级导航栏

我正试图用这段代码创建一个2级导航栏，但当我尝试将另一个子项添加到scrip中的一个子项时，它将不起作用。这个想法是让用户进入第二层，在那里他可以选择其他链接。它应该悬停在导航栏中的链接上，然后转到第一级菜单，然后悬停在其中一个选项上以获得第二级菜单

  <template>
   <!--  Top menu -->
   <nav
      id="mainNav"
      class="navbar navbar-expand-md navbar-dark fixed-top"
      :class="$route.path==='/home' ? '' : 'bg-primary'"
      >
<!--      <div class="rtl-layout" @click="addToggleClass()"><a href="javascript:void(0);">RTL</a></div>-->
      <div class="container ">
         <router-link class="navbar-brand" to="/home" routerLinkActive="active-link">
<!--            <img src="/static/img/zemle-logo.png" class="img-fluid" width="110" height="37">-->
           <h3 class="text-white" >Sospes Logo</h3>
         </router-link>

         <button
            class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="true" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
         </button>

         <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul id="main" class="navbar-nav ml-auto main-menu list-unstyled">
               <li
                  @click="menuToggleLink('menuNo'+i);"
                  class="parent nav-item"
                  v-for="(menuItem,i) in menus"
                  :id="'menuNo'+i"
                  :key="i"
                  >
                  <router-link
                     class="nav-link"
                     :to="menuItem.state"
                     v-if="menuItem.type == 'link'"
                     @click.native="removeCollapseInClass();"
                  >
                     {{ menuItem.name }}
                  </router-link>
                  <a
                     v-if="menuItem.type == 'sub'"
                     class="nav-link"
                     href="javascript:void(0)"
                  >
                     {{ menuItem.name }}&nbsp;
                     <i :class="menuItem.icon" @click.stop="menuToggle('menuNo'+i)"></i>
                  </a>
                  <ul
                     v-if="menuItem.type == 'sub' && menuItem.children"
                     class="sub-menu arrow-up list-unstyled" >
                     <li
                        class="nav-item"
                        v-for="(grandchildItem,i) of menuItem.children"
                        :key="i"
                        >
                        <router-link
                           class="nav-link"
                           :to="grandchildItem.state"
                           v-if="grandchildItem.type == 'link'"
                           @click.native="removeCollapseInClass()"
                        >
                           {{ grandchildItem.name }}
                        </router-link>
                     </li>
                  </ul>
               </li>
               <li>
                  <div
                     class="search-form"
                     click-outside
                  >
                     <span
                        data-target="#search-style-simple"
                        @click="showSearch()"
                     >
                        <i class="fa fa-search"></i>
                     </span>
                     <div
                        class="module-container"
                        :class="{'search-active': searchactive}"
                        id="search-style-simple"
                     >
                        <form role="search" method="get" class="search-box" action="javascript:void(0);">
                           <input type="search" class="form-control" placeholder="Search" value="" name="" />
                           <button type="submit"><i class="fa fa-search"></i></button>
                        </form>
                     </div><!-- /module-container -->
                  </div><!-- /module -->
               </li>
            </ul>
         </div>
      </div>
   </nav>
</template>
<script>
   export default{
      data(){
         return{
            searchactive:false,
            menus: [
               {
                  state: "/home",
                  name: "Home",
                  type:"link"
               },
               {
                  state:"",
                  name:"Pages",
                  type:"sub",
                  icon: 'fa fa-caret-down',
                  children: [
                     { state: 'about', name: 'About', type:"link"},
                     { state: 'features', name: 'Features', type:"link"},
                     { state: 'contact', name: 'Contact', type:"link"},
                     { state: 'pricing', name: 'Pricing', type:"link"},
                     { state: 'search', name: 'Search', type:"link"},
                     { state: 'portfolio-v1', name: 'Products V1', type:"link"},
                     { state: 'portfolio-v2', name: 'Products V2', type:"link"},
                     { state: 'portfolio-v3', name: 'Products V3', type:"link"}
                  ]
               },
               {
                  state:"",
                  name:"Features",
                  type:"sub",
                  icon: 'fa fa-caret-down',
                  children: [
                     { state: 'login', name:'Login', type:"link"},
                     { state: 'sign-up', name: 'Sign Up', type:"link"},
                     { state: 'thank-you', name: 'Thank You', type:"link"},
                     { state: 'maintenance', name: 'Maintenance', type:"link"},
                     { state: 'not-found', name: '404', type:"link"}
                  ]
               },
               {
                  state:"",
                  name:"Shop",
                  type:"sub",
                  icon: 'fa fa-caret-down',
                  children: [
                     { state: 'product-grid', name:'Product Grid', type:"link"},
                     { state: 'product-cart', name: 'Product Cart', type:"link"},
                     { state: 'product-checkout', name: 'Product Checkout', type:"link"},
                     { state: 'product-detail', name: 'Product Detail', type:"link"}
                  ]
               },
               {
                  state:"",
                  name:"Blog",
                  type:"sub",
                  icon: 'fa fa-caret-down',
                  children: [
                     { state: 'blog-listing-sidebar', name:'blog column ', type:"link"},
                     { state: 'blog-column3', name: 'Blog Column1', type:"link"},
                     { state: 'blog-masonry3', name: 'Blog Masonry', type:"link"},
                     { state: 'blog-sidebar', name: 'Blog Sidebar', type:"link"},
                     { state: 'blog-detail', name: 'Blog Detail', type:"link"}
                  ]
               }
            ]
         }
      },
      mounted(){
         this.onScrollEvent();
      },
      methods:{
         showSearch(){
            this.searchactive = !this.searchactive;
         },
         menuToggleLink(id){
            if (document.getElementById(id).classList.contains("open")){
               document.getElementById(id).classList.remove("open");
            } else if(!document.getElementById(id).classList.contains("open")) {
               let elements = document.querySelectorAll(".parent");
               for (var i = 0; i < elements.length; i++) {
                  elements[i].classList.remove('open');
               }
               document.getElementById(id).classList.add("open");
            }
         },
         addToggleClass(){
            document.querySelector("body").classList.toggle("rtl-enable");
         },
         removeCollapseInClass(){
            document.getElementById("navbarCollapse").classList.remove('show');
         },
         onScrollEvent(){
            var headerSticky = document.getElementById('mainNav');
            window.onscroll = function() {
               if (window.pageYOffset >= 100) {
                  headerSticky.classList.add("scrollHeader");
               }  else {
                  headerSticky.classList.remove("scrollHeader");
               }
            }
         }
      }
   }
</script>
<style>
   .scrollHeader{
      background-color: #0B3242;
   }
</style>

Sospes标志


{{menuItem.name}


{{granditem.name}






导出默认值{
数据（）{
返回{
searchactive:false，
菜单：[
{
国家：“/家庭”，
姓名：“家”，
类型：“链接”
},
{
州：“，
名称：“页数”，
类型：“sub”，
图标：“fa-fa插入符号向下”，
儿童：[
{state:'about'，name:'about'，键入：“link”}，
{state:'features'，name:'features'，键入：“link”}，
{状态：'contact'，名称：'contact'，类型：'link'}，
{state:'pricing'，name:'pricing'，键入：“link”}，
{state:'search'，name:'search'，键入：“link”}，
{state:'portfolio-v1'，name:'Products v1'，键入：“link”}，
{state:'portfolio-v2'，name:'Products v2'，键入：“link”}，
{state:'portfolio-v3'，name:'Products v3'，键入：“link”}
]
},
{
州：“，
名称：“功能”，
类型：“sub”，
图标：“fa-fa插入符号向下”，
儿童：[
{state:'login'，name:'login'，键入：“link”}，
{状态：“注册”，名称：“注册”，键入：“链接”}，
{声明：'thank-you'，名称：'thank-you'，键入：“link”}，
{state:'maintenance'，name:'maintenance'，键入：“link”}，
{状态：“未找到”，名称：“404”，键入：“链接”}
]
},
{
州：“，
名称：“店铺”，
类型：“sub”，
图标：“fa-fa插入符号向下”，
儿童：[
{状态：'product grid'，名称：'product grid'，键入：“link”}，
{state:'product cart'，name:'product cart'，键入：“link”}，
{state:'product checkout'，name:'product checkout'，键入：“link”}，
{state:'product detail'，name:'product detail'，键入：“link”}
]
},
{
州：“，
名称：“博客”，
类型：“sub”，
图标：“fa-fa插入符号向下”，
儿童：[
{状态：'blog listing sidebar'，名称：'blog column'，键入：“link”}，
{state:'blog-column3'，name:'blog Column1'，键入：“link”}，
{state:'blog-masonry3'，name:'blog-masonry3'，键入：“link”}，
{state:'blog sidebar'，name:'blog sidebar'，键入：“link”}，
{状态：'blog detail'，名称：'blog detail'，键入：“link”}
]
}
]
}
},
安装的（）{
这个.onScrolleEvent（）；
},
方法：{
showSearch（）{
this.searchactive=！this.searchactive；
},
menuToggleLink（id）{
if（document.getElementById（id）.classList.contains（“打开”））{
document.getElementById（id）.classList.remove（“打开”）；
}如果（！document.getElementById（id）.classList.contains（“打开”）），则为else{
let elements=document.queryselectoral（“.parent”）；
对于（var i=0；i=100）{
headerSticky.classList.add（“scrollHeader”）；
}否则{
headerSticky.classList.remove（“滚动头”）；
}
}
}
}
}