javascript - 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，这样我就不必绑定(bind)每个列表项的点击，除非我以前从未使用过它。

如果任何 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 : fiddle