Jquery menu active select to Vue JS

Question

i want to stop using jquery and rely on Vue for front end for a menu where i need to add active class and menu-open to the right nested list items as you can see in the jQuery, which i have no idea how to achieve.

$(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');
});

here is the menu already with app 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>

however i wanted to use v-for so i don't have to bind click on every list item except i never used it before.

If any vue expert knows a better way to do this with least code please advise me

Google for vue menu and pick one of the components offered. — Thomas
– Thomas, Commented Apr 4, 2019 at 7:55

Takachi · Accepted Answer · 2019-04-04 08:17:55Z

2

You can use v-for in your li and have something like that :

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;
    }
  }
})

Here's a fiddle you can modify if you want to try : fiddle

answered Apr 4, 2019 at 8:17

Takachi

7514 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery menu active select to Vue JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related