[Vuejs]-Toggle Other Elements in VueJS

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;
      });
    }
  }
});