Vue.js 试图了解在vue中编写下拉菜单的更好方法

我正在从jQuery/WordPress跳转到Vue，到目前为止我真的很喜欢它，但非常基本的东西可能会把我搞糊涂。我正在做一个项目，我试着自己做编码工作，而不是复制/粘贴代码到我的应用程序中，这样我就可以强迫自己学习它。我一直在做一个下拉菜单系统，并让它工作，但我知道它的草率

我在将变量向下传递到方法部分时遇到了问题，因此我似乎无法使我的函数成为动态的。所以我必须重复很多代码才能让它工作。我知道有更好的方法，我只是不明白Vue想从我这里得到什么。当我试图传递信息时，不断出现“变量已定义但未使用”错误。我不再有坏代码了，所以我不能炫耀，但我有我的工作代码

我希望有人能批评我的狗屎代码，并帮助我理解一个更圆滑的方式做这件事

<template>
  <div>
    <div id="nav">
      <nav>
        <ul>
          <li>
            <a class="navButton" @click.prevent="mapsDrop">Maps <i class="fas fa-layer-group"></i></a>
            <transition name="slide-fade">
              <div class="dropDown" v-show="isMapsOpen">
                Drop Down Menu
              </div>
            </transition>
          </li>
          <li>
            <a class="navButton" @click.prevent="createDrop">Create <i class="fas fa-plus-circle"></i></a>
            <transition name="slide-fade">
              <div class="dropDown" v-show="isCreateOpen">
                Drop Down Menu
              </div>
            </transition>
          </li>
          <li>
            <a class="circle" @click.prevent="notificationsDrop"><i class="fas fa-bell"></i></a>
            <transition name="slide-fade">
              <div class="dropDown" v-show="isNotificationsOpen">
                Notofications
              </div>
            </transition>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return{
      isMapsOpen: false,
      isCreateOpen: false,
      isNotificationsOpen: false
    }
  },
  methods: {
    toggle() {
      mutations.toggleNav();
    },
    mapsDrop() {
      this.isMapsOpen = !this.isMapsOpen
      if(this.isNotificationsOpen){
        this.isNotificationsOpen = !this.isNotificationsOpen
      }
      if(this.isCreateOpen){
        this.isCreateOpen = !this.isCreateOpen
      }
    },
    createDrop() {
     this.isCreateOpen = !this.isCreateOpen
      if(this.isNotificationsOpen){
        this.isNotificationsOpen = !this.isNotificationsOpen
      }
      if(this.isMapsOpen){
        this.isMapsOpen = !this.isMapsOpen
      }
    },
    notificationsDrop() {
     this.isNotificationsOpen = !this.isNotificationsOpen
      if(this.isCreateOpen){
        this.isCreateOpen = !this.isCreateOpen
      }
      if(this.isMapsOpen){
        this.isMapsOpen = !this.isMapsOpen
      }
    }
  }
};
</script>

我重复一遍，这一切都是有效的。我不知道如何让它在代码段模式下运行，我已经去掉了一些其他部分，所以您不必深入研究它。。我不应该为我的每个菜单创建函数，对吗

提前感谢。

尝试使用一个数据值，然后仅切换该值：

新Vue{ el:应用程序， 资料{ 返回{ 切换： } }, } 地图 下拉菜单 创造 下拉菜单 通知

---

是的，就是这样。我知道必须有一个简单的解决办法。谢谢。如果有人无意中发现了这一点，我必须在@click中使用一个模板文字，使其在菜单已经打开时关闭：@click.prevent=drop！='地图'？drop='maps'：drop=