Vue3 树形菜单显示

Question

这就是我想用 vue js 做的，如果在有子菜单的项目中点击Menu 1或Menu 2，它的ul将被打开，如果Menu 1打开，则点击Menu 2。关闭 Menu 1。我做不到，如果你能帮助我，我会很高兴。我想要做的是，如果其中一个子菜单处于打开状态，则第二个子菜单保持关闭状态。 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

请查看以下代码片段（您需要使用索引）：

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>

Vue3 树形菜单显示

Vue3 Tree Menu Show

javascript

vue.js

vuejs3