Vue 3：树形菜单显示

Question

明确我想做什么... 当Menu 1被点击时，其ul将被显示，同样如果Menu 1被显示ul，并且Menu 1被点击，ul则不会显示。同样适用于 Menu 2

你能举例说明我怎样才能做我想做的事吗？

Menu 1 单击 Menu 1 ul 显示 或 ul 显示 关闭

<ul>
    <li v-for="(item,index) in menuData" :key="index">
      <router-link :to="item.path" exact @click.stop="showMenu(index)">{{ item.name }}</router-link>
      <ul v-if="item.children" v-show="showCollapsed">
        <li v-for="(childItem,ChildIndex) in item.children" :key="ChildIndex">
          <router-link :to="childItem.path">{{ childItem.name }}</router-link>
        </li>
      </ul>
    </li>
  </ul>
<script>
export default {
  name: "App",
  data() {
    return {
      openshow: false,
      selected: null,
      menuData: [{name: "Home", path: "/",}, {name: "About", path: "/about",}, {name: "Menu 1", path: "#", children: [{name: "Menu 1.1", path: "/menu/1/1",}, {name: "Menu 1.2", path: "/menu/1/2",}, {name: "Menu 1.3", path: "/menu/1/3",},],}, {name: "Menu 2", path: "#", children: [{name: "Menu 2.1", path: "/menu/2/1",}, {name: "Menu 2.2", path: "/menu/2/2",}, {name: "Menu 2.3", path: "/menu/2/3",},],}, {name: "Gallery", path: "/gallery",}, {name: "Contact", path: "/contact",},],
    }
  },
  methods: {
    showMenu(index) {
      this.selected = index;
    },
    showCollapsed() {

    }
  }
}
</script>

Answer 1

只需将 showMenu 方法与传递的索引一起使用，然后检查 ul 显示传递给 showCollapsed 的索引：

const app = Vue.createApp({
   data() {
    return {
      openshow: false,
      selected: null,
      menuData: [{name: "Home", path: "/",}, {name: "About", path: "/about",}, {name: "Menu 1", path: "#", children: [{name: "Menu 1.1", path: "/menu/1/1",}, {name: "Menu 1.2", path: "/menu/1/2",}, {name: "Menu 1.3", path: "/menu/1/3",},],}, {name: "Menu 2", path: "#", children: [{name: "Menu 2.1", path: "/menu/2/1",}, {name: "Menu 2.2", path: "/menu/2/2",}, {name: "Menu 2.3", path: "/menu/2/3",},],}, {name: "Gallery", path: "/gallery",}, {name: "Contact", path: "/contact",},],
    }
  },
  methods: {
    showMenu(index) {
      this.selected === index ? this.selected = null : this.selected = index;
    },
    showCollapsed(idx) {
      return idx === this.selected || false
    }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <ul>
    <li v-for="(item,index) in menuData" :key="index" @click="showMenu(index)">
      <router-link :to="item.path" exact>{{ item.name }}</router-link>
      <ul v-if="item.children" v-show="showCollapsed(index)">
        <li v-for="(childItem,ChildIndex) in item.children" :key="ChildIndex">
          <router-link :to="childItem.path">{{ childItem.name }}</router-link>
        </li>
      </ul>
    </li>
  </ul>
</div>

Vue 3：树形菜单显示

Vue 3: Tree Menu Show

javascript

vue.js

vuejs3