Para que quede claro lo que quiero hacer... Cuando se hace clic en el Menu 1 , se mostrará su ul y, del mismo modo, si se muestra el Menu 1 ul , y se hace clic en el Menu 1 , no se muestra ul . lo mismo se aplica al Menu 2
¿Me puede mostrar como un ejemplo cómo puedo hacer lo que quiero hacer?
Menu 1 Haga clic en Menu 1 ul mostrar o ul mostrar cerrar
<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>Simplemente use el método showMenu con el índice pasado y luego verifique qué ul mostrar para pasar el índice a 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>