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 >
      <div >
        <ul >
          <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>

CodePudding user response：

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/[email protected]/dist/vue.global.prod.js"></script>
<div id="demo">
  <div >
    <div >
      <ul >
        <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>