Skip to main content
Formatação
Fonte Link
Felipe Duarte
  • 6,4mil
  • 2
  • 22
  • 49

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 ?

Eu tenho um menu dinâmico que vem de uma 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 ?

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 ?

Eu tenho um menu dinâmico que vem de uma Rest APIAPI.
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ível3° nível, gostaria que meuo menu abrisse de acordo de onde o usuário está, para ele se localizar.
Para os meus "ul"ul abrir, eu preciso colocar a classe "collapse in"collapse in. Eu fiz a condição de ":class":class na minha tag "a"a e funciona, será que devo usar ela de condição para abrir meus "ul"ul ?

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" ?

Eu tenho um menu dinâmico que vem de uma 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 ?

removeu 27 caracteres do conteúdo
Fonte Link
Jackson
  • 861
  • 1
  • 9
  • 22

v-for MenuMenu.vue:

<template>
    <li v-for="item in Menu">
        <router-link :to="{ name: item.SomewhereRota }" tag="a" :class="{ 'active': $route.name === item.SomeWhereRota }">
            {{item.NameNome}}
        </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.SomewhereRota }" tag="a" :class="{ 'active': $route.name === SecondItem.SomeWhereRota }">
                    {{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.SomewhereRota }" tag="a" :class="{ 'active': $route.name === ThirdItem.SomeWhereRota }">
                            {{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>

v-for Menu:

<li v-for="item in Menu">
    <router-link :to="{ name: item.Somewhere }" tag="a" :class="{ 'active': $route.name === item.SomeWhere}">
        {{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.SomeWhere}">
                {{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.SomeWhere}">
                        {{ThirdItem.Nome}}
                    </router-link>
                </li>
            </ul>
        </li>
    </ul>
</li>

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>
removeu 3 caracteres do conteúdo
Fonte Link
Jackson
  • 861
  • 1
  • 9
  • 22
Carregando
Fonte Link
Jackson
  • 861
  • 1
  • 9
  • 22
Carregando