时间戳

首页 > 解决方案 > 试图理解在 vue 中对我的下拉菜单进行编码的更好方法

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

解决方案

尝试使用一个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确定它是否包含正确的值。

推荐阅读