Skip to main content
1 de 5
Jackson
  • 861
  • 1
  • 9
  • 22

VueJS Menu Collapse

Eu tenho um menu dinâmico que vem de uma Rest API.
Meu problema é: Hoje quando eu acesso alguma página, todos os menus vem fechados. Eu queria que quando eu entrasse por exemplo em uma página de 3° nível, gostaria que meu menu abrisse de acordo de onde o usuário está, para ele se localizar.
Para os meus "ul" abrir, eu preciso colocar a classe "collapse in". Eu fiz a condição de ":class" na minha tag "a" e funciona, será que devo usar ela de condição para abrir meus "ul" ?

Obrigado!

v-for Menu:

<li v-for="item in Menu">
    <router-link :to="{ name: item.Somewhere }" tag="a" :class="{ 'active': $route.name === item.ChaveRota }">
        {{item.Name}}
    </router-link>
    <ul class="nav nav-second-level" v-if="item.SubMenu != null">
        <li v-for="SecondItem in item.SubMenu">
            <router-link :to="{ name: SecondItem.Somewhere }" tag="a" :class="{ 'active': $route.name === SecondItem.ChaveRota }">
                {{SecondItem.Nome}}
            </router-link>
            <ul class="nav nav-third-level" v-if="SecondItem.MenuItem != null">
                <li v-for="ThirdItem in SecondItem.MenuItem">
                    <router-link :to="{ name: ThirdItem.Somewhere }" tag="a" :class="{ 'active': $route.name === ThirdItem.ChaveRota }">
                        {{ThirdItem.Nome}}
                    </router-link>
                </li>
            </ul>
        </li>
    </ul>
</li>
Jackson
  • 861
  • 1
  • 9
  • 22