javascript - VueJS 中的下拉菜单(事件菜单的切换)

Question

这是菜单，在我的导航菜单和方法下方，单击时应打开导航项内的子项，但我似乎找不到我缺少的地方

[![dropdown_menu][1]][1]

new Vue({
      el: '#app',
      data: {
//menu
        "menu_title": "a",
        "child_routes": [{
            "path": "/a1",
            "menu_title": "a1"
          },
          {
            "path": "/a2",
            "menu_title": "a2"
          }
        ]
      },
      {
        "menu_title": "b",
        "child_routes": [{
            "path": "/b1",
            "menu_title": "b1"
          },
          {
            "path": "/b2",
            "menu_title": "b2"
          },
          {
            "path": "/b1",
            "menu_title": "b3"
          }
        ]
      },
      {
        "menu_title": "c",
        "child_routes": [{
            "path": "/c1",
            "menu_title": "c1"
          },
          {
            "path": "/c2",
            "menu_title": "c2"
          },
          {
            "path": "/c3",
            "menu_title": "c3"
          }
        ]
      }
    },
    methods: {
      navlinks() {
        var navItemParent = document.querySelector("nav-item");
        var navLink = document.querySelector(".idb-nav .nav-item .nav-link");
        var navItem = document.querySelector(".idb-nav .nav-item");
        navItem.classList.toggle("active");

        if (navItem.contains("active")) {
          navItem.classList.remove("active");
          navLink.classList.toggle("active");
        }

      }

    )

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <nav class="idb-sidebar-nav">
    <ul class="idb-nav list-unstyled m-15 p-0">
      <template v-for="(menu, index) in sideBarLinks.routes">
					<li class="nav-item" v-if="menu.child_routes!=null" :key="index">
						<a href="javascript:void(0)" class="nav-link" @click="navlinks"  >
							<i :class="menu.menu_icon" class="menu-icon"></i>
							<span class="menu-title">{{menu.menu_title}}</span>
						</a>
            <ul class="list-unstyled sub-menu">
							<router-link 
								:to="subMenu.path" 
								tag="li" 
								v-for="(subMenu, key) in menu.child_routes" 
								:key="key"
							>
								<a href="javascript:void(0)" class="sub-menu-nav-link">
									<span>{{subMenu.menu_title}}</span>
								</a>
							</router-link>
						</ul>
					</li>
					<router-link 
						:key="index" 
						:to="menu.path" 
						tag="li" 
						class="nav-item" 
						v-else
					>
						<a class="nav-link">
							<i :class="menu.menu_icon" class="mr-15"></i>
							<span class="menu-title">{{menu.menu_title }}</span>
						</a>
					</router-link>
				</template>
    </ul>
  </nav>
</div>

Answer 1

类切换应该作为数据的一部分进行管理。试试这个，看看它是否适合你:

HTML

<div id="app">
   <nav class="idb-sidebar-nav">
      <ul class="idb-nav list-unstyled m-15 p-0">
         <template v-for="(menu, index) in sideBarLinks.routes" :key="index">
            <li class="nav-item"
                  v-if="menu.child_routes && menu.child_routes.length">

               <a :class="[ 'nav-link', { 'active': menu.active } ]"
                  href="javascript:void(0);"
                  @click="toggleMenu(index)">

                  <i :class="menu.menu_icon" class="menu-icon"></i>
                  <span class="menu-title">{{menu.menu_title}}</span>
               </a>

               <ul class="list-unstyled sub-menu">
                  <router-link tag="li"
                               v-for="(subMenu, key) in menu.child_routes"
                               :key="key"
                               :to="subMenu.path">
                     <a href="javascript:void(0);" class="sub-menu-nav-link">
                        <span>{{subMenu.menu_title}}</span>
                     </a>
                  </router-link>
               </ul>
            </li>

            <router-link v-else
                         :key="index"
                         :to="menu.path"
                         tag="li"
                         class="nav-item">

               <a :class="[ 'nav-link', { 'active': menu.active } ]"
                  href="javascript:void(0);"
                  @click="toggleMenu(index)">

                  <i :class="menu.menu_icon" class="mr-15"></i>
                  <span class="menu-title">{{menu.menu_title }}</span>
               </a>

            </router-link>
         </template>
      </ul>
   </nav>
</div>

路由.json

为了提高可读性和可维护性，您最好将列表移动到单独的文件中。

[
   {
      "menu_title": "a",
      "child_routes": [
         {
            "path": "/a1",
            "menu_title": "a1"
         },
         {
            "path": "/a2",
            "menu_title": "a2"
         }
      ],
      active: true // First item opened by default (if you like)
   },
   {
      "menu_title": "b",
      "child_routes": [
         {
            "path": "/b1",
            "menu_title": "b1"
         },
         {
            "path": "/b2",
            "menu_title": "b2"
         },
         {
            "path": "/b1",
            "menu_title": "b3"
         }
      ],
      active: false
   },
   {
      // ...
   }
]

应用程序.js

import * as routes from './routes.json';

const vm = new Vue({
   el: '#app',

   data() {
      return {
         sideBarLinks: {
            routes
         }
      }
   },

   methods: {
      toggleSidebar(index) {
         this.sideBarLinks
            .routes
            .forEach((menu, i) => menu.active = (i === index));
      }
   }
});