Jquery 菜单活动选择到 Vue JS

Question

我想停止使用 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 专家知道用最少的代码更好地做到这一点，请告诉我

Answer 1

你可以在你的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>

JS

new Vue({
  el: "#app",
  data: {
    items: [
      { name: "Utilizadores", options: ['Criar', 'Consultar'], showSub: false },
      { name: "Departamentos", options: ['Criar', 'Consultar'], showSub: false },
      { name: "Acessos", options: ['Criar', 'Consultar'], showSub: false }
    ]
  },
  methods: {
    show(key) {
        this.items[key].showSub = !this.items[key].showSub;
    }
  }
})

如果您想尝试，可以修改以下小提琴：fiddle