Javascript Jquery菜单活动选择Vue JS

我想停止使用jquery，并依赖Vue作为菜单的前端，我需要将活动类和菜单打开添加到右嵌套列表项中，正如您在jquery中看到的那样，我不知道如何实现这一点

$(document).ready(function () {

    var url = window.location;

    // Adds active on inner anchor and treeview anchor and treeview menu-open state to li
    $('ul.nav a').filter(function () {
        return this.href == url;
    }).addClass('active').parent().parent().siblings().addClass('active').addClass('text-dark').parent().addClass('menu-open');
});

这是已具有应用程序id的菜单

<ul id="app" class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">

<!-- Add icons to the links using the .nav-icon class
     with font-awesome or any other icon font library -->
<li class="nav-header text-center pb-1 text-white "><strong>Menu de Navegação</strong></li>

<li class="nav-item has-treeview">
    <a href="#" class="nav-link custom-sidebar-link">
        <i class="nav-icon fas fas fa-users text-white"></i>
        <p class="text-white">
            Utilizadores
            <i class="right fa fa-angle-left text-white"></i>
        </p>
    </a>
    <ul class="nav nav-treeview">
        <li class="nav-item custom-sidebar-link">
            <a asp-page="/Account/Manage/Users/Create" class="nav-link custom-nav-inner-link">
                <i class="nav-icon fas fa-caret-right"></i>
                <p>Criar</p>
            </a>
        </li>
        <li class="nav-item custom-sidebar-link">
            <a asp-page="/Account/Manage/Users/Index" class="nav-link custom-nav-inner-link">
                <i class="nav-icon fas fa-caret-right"></i>
                <p>Consultar</p>
            </a>
        </li>
    </ul>
</li>

<li class="nav-item has-treeview">
    <a href="#" class="nav-link custom-sidebar-link">
        <i class="nav-icon fas fa-layer-group text-white"></i>
        <p class="text-white">
            Departamentos
            <i class="right fa fa-angle-left text-white"></i>
        </p>
    </a>
    <ul class="nav nav-treeview">
        <li class="nav-item custom-sidebar-link">
            <a asp-page="/Account/Manage/Departamentos/Create" class="nav-link custom-nav-inner-link">
                <i class="nav-icon fas fa-caret-right"></i>
                <p>Criar</p>
            </a>
        </li>
        <li class="nav-item custom-sidebar-link">
            <a asp-page="/Account/Manage/Departamentos/Index" class="nav-link custom-nav-inner-link">
                <i class="nav-icon fas fa-caret-right"></i>
                <p>Consultar</p>
            </a>
        </li>
    </ul>
</li>

<li class="nav-item has-treeview">
    <a href="#" class="nav-link custom-sidebar-link">
        <i class="nav-icon fas fa-shield-alt text-white"></i>
        <p class="text-white">
            Acessos
            <i class="right fa fa-angle-left text-white"></i>
        </p>
    </a>
    <ul class="nav nav-treeview">

        <li class="nav-item">
            <a asp-page="/Account/Manage/Roles/Create" class="nav-link custom-nav-inner-link">
                <i class="nav-icon fas fa-caret-right"></i>
                <p>Criar</p>
            </a>
        </li>

        <li class="nav-item custom-sidebar-link">
            <a asp-page="/Account/Manage/Roles/Index" class="nav-link custom-nav-inner-link">
                <i class="nav-icon fas fa-caret-right"></i>
                <p>Consultar</p>
            </a>
        </li>

    </ul>
</li>

<li class="nav-item has-treeview">
    <a href="#" class="nav-link custom-sidebar-link">
        <i class="nav-icon fab fa-app-store-ios text-white"></i>            
        <p class="text-white">
            Aplicações
            <i class="right fa fa-angle-left text-white"></i>
        </p>
    </a>
    <ul class="nav nav-treeview">

        <li class="nav-item">
            <a asp-page="/Account/Manage/Apps/Create" class="nav-link custom-nav-inner-link">
                <i class="nav-icon fas fa-caret-right"></i>
                <p>Criar</p>
            </a>
        </li>

        <li class="nav-item custom-sidebar-link">
            <a asp-page="/Account/Manage/Apps/Index" class="nav-link custom-nav-inner-link">
                <i class="nav-icon fas fa-caret-right"></i>
                <p>Consultar</p>
            </a>
        </li>

    </ul>
</li>

导航菜单










叫喊



领事

然而，我想使用v-for，所以我不必绑定对每个列表项的单击，除非我以前从未使用过它

---

如果任何vue专家知道用最少的代码执行此操作的更好方法，请建议我

您可以在您的

li

中使用

v-for

，并具有类似的功能：

HTML

<div id="app">
  <ul>
    <li class='item' v-for="(item, key) in items" @click="show(key)">
      {{ item.name }}
      <ul v-show="item.showSub">
        <li v-for="option in item.options">
          {{ option }}
        </li>
      </ul>
    </li>
  </ul>
</div>

---

如果你想尝试的话，这里有一把小提琴可以修改：

你可以在你的

li

中使用

v-for

，并且有类似的东西：

HTML

<div id="app">
  <ul>
    <li class='item' v-for="(item, key) in items" @click="show(key)">
      {{ item.name }}
      <ul v-show="item.showSub">
        <li v-for="option in item.options">
          {{ option }}
        </li>
      </ul>
    </li>
  </ul>
</div>

---

如果您想尝试，您可以修改以下内容：

谷歌搜索

vue菜单

并选择一个提供的组件。谷歌搜索

vue菜单

并选择一个提供的组件。