Question

我正在VueJS中创建一个导航栏，在其中可以打开或关闭下拉菜单。我没有切换单个下拉菜单的问题，但是我无法弄清楚如何处理多个下拉菜单，因此如果我打开一个菜单，其他菜单会自动关闭。

例如，让我们看下面的代码：

big-feature

假设我单击菜单一，然后单击菜单二（然后单击三和四）。使用我当前的代码，所有四个菜单都将打开。但是，我想要的是，如果我单击特定菜单，不仅会打开它，而且其他下拉菜单也会关闭。

如何使用VueJS做到这一点？

谢谢。

Answer 1

这是示例代码。但是这里的问题是，一旦禁用该按钮，您将无法单击它。也许添加一个复选框以启用所有按钮？

这是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>

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

在VueJS中切换其他元素

1 个答案: