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, o 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!
Menu.vue:
<template>
<li v-for="item in Menu">
<router-link :to="{ name: item.Rota }" tag="a" :class="{ 'active': $route.name === item.Rota }">
{{item.Nome}}
</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.Rota }" tag="a" :class="{ 'active': $route.name === SecondItem.Rota }">
{{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.Rota }" tag="a" :class="{ 'active': $route.name === ThirdItem.Rota }">
{{ThirdItem.Nome}}
</router-link>
</li>
</ul>
</li>
</ul>
</li>
</template>
<script>
import axios from 'axios'
export default {
data: () => ({
Menu: []
}),
created() {
let Data = [{
"Nome": "Produtos",
"MenuItem": [{
"Nome": "Catalogos de Produtos",
"Rota": "Produtos"
}]
},
{
"Nome": "Menu Teste",
"MenuItem": [{
"Nome": "Menu Teste Nível 3",
"MenuItem": [{
"Nome": "Página teste 3",
"Rota": "PagTesteTres"
}]
}]
}
]
this.Menu = Data;
}
}
</script>
props
e usar um:class="{'CLASS_COLLAPSE': isProps}"
?