下拉菜单的vue切换类答案

【问题标题】：vue toggle class for dropdown menu下拉菜单的vue切换类
【发布时间】：2020-03-23 12:55:15
【问题描述】：

当我点击 a 链接以使用 VueJS 显示下拉菜单时，我想将 active-submenu 类切换到 li 标记，但我没有'不知道如何请帮助我

<template>
  <ul>
    <li class="active-submenu">
      <a href="#">
        <i class="uil-envelope-alt"></i>
        <span>Email</span>
      </a>
      <ul>
        <li>
          <a href="email-inbox">Inbox</a>
          <a href="email-inbox-read">Email Read</a>
          <a href="email-compose">Email Compose</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">
        <i class="uil-shopping-basket"></i>
        <span>E-commerce</span>
      </a>
      <ul>
        <li>
          <a href="shop-card">Products Grid</a>
        </li>
        <li>
          <a href="shop-listing">Products List</a>
        </li>
        <li>
          <a href="shop-product">Product</a>
        </li>
      </ul>
    </li>
    </li>
  </ul>
</template>

【问题讨论】：

您应该为 A 标签分配一个 @click 处理程序，该处理程序将设置 currentPage 变量 - 然后您可以使用 <li :class="{'active-submenu': currentPage ===1}">
很抱歉我是 vue 新手

标签： vue.js vuejs2

【解决方案1】：

类似这样的：

<template>
  <ul>
    <li :class="{'active-submenu': activeEmail}">
      <a href="#" @click.prevent="activeEmail = !activeEmail">
        <i class="uil-envelope-alt"></i>
        <span>Email</span>
      </a>
      <ul>
        <li>
          <a href="email-inbox">Inbox</a>
          <a href="email-inbox-read">Email Read</a>
          <a href="email-compose">Email Compose</a>
        </li>
      </ul>
    </li>
    <li :class="{'active-submenu': activeCommerce}">
      <a href="#" @click.prevent="activeCommerce = !activeCommerce">
        <i class="uil-shopping-basket"></i>
        <span>E-commerce</span>
      </a>
      <ul>
        <li>
          <a href="shop-card">Products Grid</a>
        </li>
        <li>
          <a href="shop-listing">Products List</a>
        </li>
        <li>
          <a href="shop-product">Product</a>
        </li>
      </ul>
    </li>
    </li>
  </ul>
</template>

<script>
export default
{
  name: 'MyCustomMenu',
  data()
  {
    return {
      activeEmail: true,
      activeCommerce: false,
    }
  }
}
</script>

【讨论】：

它不是切换点击它只是一个点击然后它是添加类但在我再次点击后它不会删除类
在我使用这个之前
方法：{ setActive() { this.active = !this.active; this.active ? event.target.parentElement.classList.add('active-submenu') : event.target.parentElement.classList.remove('active-submenu'); },
但是当我再次点击它时，它会将页面滑到顶部
好的，我已经更新了代码以使用“切换”而不是“切换”