Toggle Other Elements in VueJS - vue.js

Question

I am creating a navbar in VueJS where I toggle on or off drop-down menus. I have no problem toggling an individual drop-down menu, but I cannot figure out how to handle multiple-drop down menus so that if I open up one menu the other ones will automatically close.
For instance, let's take a look at the following code:
// template
<button #click="isMenuOneOpen = !isMenuOneOpen">Menu One<button>
<button #click="isMenuTwoOpen = !isMenuTwoOpen">Menu Two<button>
<button #click="isMenuThreeOpen = !isMenuThreeOpen">Menu Three<button>
<button #click="isMenuFourOpen = !isMenuFourOpen">Menu Four<button>
...
// script --> data
isMenuOneOpen: false,
isMenuTwoOpen: false,
isMenuThreeOpen: false,
isMenuFourOpen: false,
Let's say I click on menu one and then click on menu two (and then three and four). With my current code, all four menus will be open. What I want, though, is that if I click on a particular menu, not only will it open up but the other drop-down menus will close.
How can I do this using VueJS?
Thanks.

Answer 1

Here's a sample code. But the problem here is that, once you disable the button, you won't be able to click it. Maybe add a checkbox to enable all buttons?
Here's the html:
<div id="app">
<v-app id="inspire">
<div v-for="button in buttons">
<button #click="updateMenu(button.name)" :disabled='button.isDisabled'>{{ button.name }}</button>
</div>
</v-app>
</div>
Here's the javascript:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
buttons: [{name: "menu one", isDisabled: false}, {name: "menu two", isDisabled: false}, {name: "menu three", isDisabled: false}, {name: "menu four", isDisabled: false}]
}),
methods: {
updateMenu: function (name) {
const button = this.buttons.find(b => b.name === name);
button.isDisabled = false;
const toDisableButtons = this.buttons.filter(b => b.name != name);
toDisableButtons.forEach(function(item) {
item.isDisabled = true;
});
}
}
});