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

Question

我正在从 jQuery/WordPress 跳到 Vue，到目前为止我真的很喜欢它，但非常基本的事情会让我感到困惑。我正在做一个项目，我正在尝试自己完成编码工作（而不是 copy/paste 代码到我的应用程序中），所以我可以强迫自己学习它。我一直在研究下拉菜单系统并让它工作，但我知道它很草率。

我在将变量向下传递到方法部分时遇到了问题，所以我似乎无法使我的函数动态化。所以我不得不重复很多代码才能让它工作。我知道有更好的方法可以做到这一点，我只是不明白 Vue 想要从我这里得到什么。当我尝试传递信息时，我不断收到 'variable is defined but not used' 错误。我没有损坏的代码了，所以我无法展示它，但我确实有我的工作代码。

我希望有人可以批评我的狗屎代码并帮助我理解一个更圆滑的方法。

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

为每个下拉菜单插入一个唯一值，然后使用 v-if 确定它是否包含正确的值。

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

Trying to understand a better way to code my drop-down menus in vue

vue.js

dropdown

vuejs2