Vue3 树形菜单显示

Question

this is what i want to do with vue.js, If Menu 1 or Menu 2 is clicked among the items with submenu, its ul will be opened, and if Menu 1 is open, Menu 2 is clicked. Close Menu 1 . I couldn't do this, I would be happy if you help me. What I want to do is if one of the submenu is open, the 2nd submenu remains closed. Codesandbox

<template>
 <div class="navigation">
      <div class="container max-w-7xl mx-auto">
        <ul class="flex justify-end navbar-nav">
          <li v-for="(menu, index) in menuItem" :key="index">
            <a href="menu.href" @click.stop="showMenu()">{{ menu.title }}</a>
            <ul v-if="menu.children" :style="{ display: active ? 'block' : 'none' }" @click.stop>
              <li  v-for="(child, childIndex) in menu.children" :key="childIndex">
                <a href="child.href">{{ child.title }}</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      active: false,
      menuItem: [
        {
          title: "Home",
          href: "/home",
        },
        {
          title: "About",
          href: "/about",
        },
        {
          title: "Menu 1",
          href: "#",
          children: [
            {
              title: "Menu 1.1",
              href: "/menu/1/1",
            },
            {
              title: "Menu 1.2",
              href: "/menu/1/2",
            },
            {
              title: "Menu 1.3",
              href: "/menu/1/3",
            },
          ],
        },
        {
          title: "Menu 2",
          href: "#",
          children: [
            {
              title: "Menu 2.1",
              href: "/menu/2/1",
            },
            {
              title: "Menu 2.2",
              href: "/menu/2/2",
            },
            {
              title: "Menu 2.3",
              href: "/menu/2/3",
            },
          ],
        },
        {
          title: "Gallery",
          href: "/gallery",
        },
        {
          title: "Contact",
          href: "/contact",
        },
      ],
    };
  },
  methods: {
    showMenu() {
      this.active = !this.active;
    },
    close() {
      this.active = false;
    },
  },
  mounted() {
    document.addEventListener("click", this.close);
  },
  unmounted() {
    document.removeEventListener("click", this.close);
  },
};
</script>

Answer 1

Please take a look at following snippet (you need to use index):

 const app = Vue.createApp({ data() { return { menuItem: [{title: "Home", href: "/home",}, {title: "About", href: "/about",}, {title: "Menu 1", href: "#", children: [{title: "Menu 1.1", href: "/menu/1/1",}, {title: "Menu 1.2", href: "/menu/1/2",}, {title: "Menu 1.3", href: "/menu/1/3",},],}, {title: "Menu 2", href: "#", children: [{title: "Menu 2.1", href: "/menu/2/1",}, {title: "Menu 2.2", href: "/menu/2/2",}, {title: "Menu 2.3", href: "/menu/2/3",},],}, {title: "Gallery", href: "/gallery",}, {title: "Contact", href: "/contact",},], selected: null }; }, methods: { showMenu(i) { this.selected = i }, } }) app.mount('#demo')

 <script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script> <div id="demo"> <div class="navigation"> <div class="container max-w-7xl mx-auto"> <ul class="flex justify-end navbar-nav"> <li v-for="(menu, index) in menuItem":key="index"> <a href="#" @click.stop="showMenu(index)">{{ menu.title }}</a> <ul:style="selected === index? 'display: block': 'display: none'"> <li v-for="(child, childIndex) in menu.children":key="childIndex"> <a href="#">{{ child.title }}</a> </li> </ul> </li> </ul> </div> </div> </div>