title: Jquery menu active select to Vue JS
body: <p>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.</p>
  
  <pre><code>$(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');
  });
  </code></pre>
  
  <p>here is the menu already with app id</p>
  
  <pre><code>&lt;ul id="app" class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"&gt;
  
  &lt;!-- Add icons to the links using the .nav-icon class
       with font-awesome or any other icon font library --&gt;
  &lt;li class="nav-header text-center pb-1 text-white "&gt;&lt;strong&gt;Menu de Navegação&lt;/strong&gt;&lt;/li&gt;
  
  &lt;li class="nav-item has-treeview"&gt;
      &lt;a href="#" class="nav-link custom-sidebar-link"&gt;
          &lt;i class="nav-icon fas fas fa-users text-white"&gt;&lt;/i&gt;
          &lt;p class="text-white"&gt;
              Utilizadores
              &lt;i class="right fa fa-angle-left text-white"&gt;&lt;/i&gt;
          &lt;/p&gt;
      &lt;/a&gt;
      &lt;ul class="nav nav-treeview"&gt;
          &lt;li class="nav-item custom-sidebar-link"&gt;
              &lt;a asp-page="/Account/Manage/Users/Create" class="nav-link custom-nav-inner-link"&gt;
                  &lt;i class="nav-icon fas fa-caret-right"&gt;&lt;/i&gt;
                  &lt;p&gt;Criar&lt;/p&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item custom-sidebar-link"&gt;
              &lt;a asp-page="/Account/Manage/Users/Index" class="nav-link custom-nav-inner-link"&gt;
                  &lt;i class="nav-icon fas fa-caret-right"&gt;&lt;/i&gt;
                  &lt;p&gt;Consultar&lt;/p&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  
  &lt;li class="nav-item has-treeview"&gt;
      &lt;a href="#" class="nav-link custom-sidebar-link"&gt;
          &lt;i class="nav-icon fas fa-layer-group text-white"&gt;&lt;/i&gt;
          &lt;p class="text-white"&gt;
              Departamentos
              &lt;i class="right fa fa-angle-left text-white"&gt;&lt;/i&gt;
          &lt;/p&gt;
      &lt;/a&gt;
      &lt;ul class="nav nav-treeview"&gt;
          &lt;li class="nav-item custom-sidebar-link"&gt;
              &lt;a asp-page="/Account/Manage/Departamentos/Create" class="nav-link custom-nav-inner-link"&gt;
                  &lt;i class="nav-icon fas fa-caret-right"&gt;&lt;/i&gt;
                  &lt;p&gt;Criar&lt;/p&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item custom-sidebar-link"&gt;
              &lt;a asp-page="/Account/Manage/Departamentos/Index" class="nav-link custom-nav-inner-link"&gt;
                  &lt;i class="nav-icon fas fa-caret-right"&gt;&lt;/i&gt;
                  &lt;p&gt;Consultar&lt;/p&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  
  &lt;li class="nav-item has-treeview"&gt;
      &lt;a href="#" class="nav-link custom-sidebar-link"&gt;
          &lt;i class="nav-icon fas fa-shield-alt text-white"&gt;&lt;/i&gt;
          &lt;p class="text-white"&gt;
              Acessos
              &lt;i class="right fa fa-angle-left text-white"&gt;&lt;/i&gt;
          &lt;/p&gt;
      &lt;/a&gt;
      &lt;ul class="nav nav-treeview"&gt;
  
          &lt;li class="nav-item"&gt;
              &lt;a asp-page="/Account/Manage/Roles/Create" class="nav-link custom-nav-inner-link"&gt;
                  &lt;i class="nav-icon fas fa-caret-right"&gt;&lt;/i&gt;
                  &lt;p&gt;Criar&lt;/p&gt;
              &lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li class="nav-item custom-sidebar-link"&gt;
              &lt;a asp-page="/Account/Manage/Roles/Index" class="nav-link custom-nav-inner-link"&gt;
                  &lt;i class="nav-icon fas fa-caret-right"&gt;&lt;/i&gt;
                  &lt;p&gt;Consultar&lt;/p&gt;
              &lt;/a&gt;
          &lt;/li&gt;
  
      &lt;/ul&gt;
  &lt;/li&gt;
  
  &lt;li class="nav-item has-treeview"&gt;
      &lt;a href="#" class="nav-link custom-sidebar-link"&gt;
          &lt;i class="nav-icon fab fa-app-store-ios text-white"&gt;&lt;/i&gt;            
          &lt;p class="text-white"&gt;
              Aplicações
              &lt;i class="right fa fa-angle-left text-white"&gt;&lt;/i&gt;
          &lt;/p&gt;
      &lt;/a&gt;
      &lt;ul class="nav nav-treeview"&gt;
  
          &lt;li class="nav-item"&gt;
              &lt;a asp-page="/Account/Manage/Apps/Create" class="nav-link custom-nav-inner-link"&gt;
                  &lt;i class="nav-icon fas fa-caret-right"&gt;&lt;/i&gt;
                  &lt;p&gt;Criar&lt;/p&gt;
              &lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li class="nav-item custom-sidebar-link"&gt;
              &lt;a asp-page="/Account/Manage/Apps/Index" class="nav-link custom-nav-inner-link"&gt;
                  &lt;i class="nav-icon fas fa-caret-right"&gt;&lt;/i&gt;
                  &lt;p&gt;Consultar&lt;/p&gt;
              &lt;/a&gt;
          &lt;/li&gt;
  
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p>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.</p>
  
  <p>If any vue expert knows a better way to do this with least code please advise me</p>