试图了解在vue中编码我的下拉菜单的更好方法

Question

我正在从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>

我再说一遍，这一切正常。我无法弄清楚如何使其在代码段模式下运行，并且我去除了其他一些部分，因此您不必进行深入研究。.我不必为每个部分创建函数我的菜单，对吧？

提前感谢。

Answer 1

尝试使用一个data值并仅使用该值进行切换：

new Vue({
  el: "#app",
  data() {
    return{
      toggle: ""
    }
  },
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
    <div id="nav">
      <nav>
        <ul>
          <li>
            <a class="navButton" @click.prevent="toggle = 'maps'">Maps <i class="fas fa-layer-group"></i></a>
            <transition name="slide-fade">
              <div class="dropDown" v-if="toggle === 'maps'">
                Drop Down Menu
              </div>
            </transition>
          </li>
          <li>
            <a class="navButton" @click.prevent="toggle = 'create'">Create <i class="fas fa-plus-circle"></i></a>
            <transition name="slide-fade">
              <div class="dropDown" v-if="toggle === 'create'">
                Drop Down Menu
              </div>
            </transition>
          </li>
          <li>
            <a class="circle" @click.prevent="toggle = 'notifications'"><i class="fas fa-bell"></i></a>
            <transition name="slide-fade">
              <div class="dropDown" v-if="toggle === 'notifications'">
                Notifications
              </div>
            </transition>
          </li>
        </ul>
      </nav>
    </div>
</div>