当我在Vuejs 3中打开另一个下拉菜单(没有插件)时，我如何关闭下拉菜单

Question

我在一个组件中有两个下拉菜单，我想在另一个打开时关闭其中一个我是Vuejs的新手，所以我不想使用任何插件，我想从头开始构建它，如果有人能帮我的话？这是我的实际代码

<template>
<ul class="menu">
<li v-for="menu in menus" :key="menu.id">
<button class="button is-white" @click="toggle">
{{menu.name}}
<ion-icon name="chevron-down-outline"></ion-icon>
</button>
<div class="dropdown" v-show="open">
<router-link to="/" v-for="item in menu.subMenu">
<div class="options">
{{item}}
</div>
</router-link>
</div>
</li>
</ul>

data() {
return {
open: false,
menus: [
{
id: 1,
name: 'My Profile',
subMenu: ['Dashboard', 'My Profile', 'Logout']
},
{
id: 2,
name: ' My Orders',
subMenu: ['Order']
}
],

}
},
created() {
window.addEventListener("click", this.close);
},
beforeDestroy() {
window.removeEventListener("click", this.close);
},
methods: {
toggle() {
this.open = !this.open
},
close(e) {
if (!this.$el.contains(e.target)) {
this.open = false;
}
}
}

Answer 1

打开/关闭时使用id而不是布尔值：

const app = Vue.createApp({
data() {
return {
open: null,
menus: [{id: 1, name: 'My Profile', subMenu: ['Dashboard', 'My Profile', 'Logout']}, {id: 2, name: ' My Orders', subMenu: ['Order']}],  
}
},
methods: {
toggle(id) {
this.open = this.open === id ? null : id
},
}
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<ul class="menu">
<li v-for="menu in menus" :key="menu.id">
<button class="button is-white" @click="toggle(menu.id)">
{{ menu.name }}
<ion-icon name="chevron-down-outline"></ion-icon>
</button>
<div class="dropdown" v-show="menu.id === open">
<div to="/" v-for="item in menu.subMenu">
<div class="options">
{{ item }}
</div>
</div>
</div>
</li>
</ul>
</div>