0

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>
7
  • Seria interessante colocar mais codigo, so com isso eé dificil ajudar. Commented 22/09/2017 às 17:51
  • @RafaelAugusto Eu coloquei o Menu.vue inteiro. esse parametro "Rota" é o Name da rota.
    – Jackson
    Commented 22/09/2017 às 18:52
  • Se eu acessar o Página Teste 3 na URL direto, eu queria que os ul já viessem com o collapse in em sua classe ( Já viessem abertos )
    – Jackson
    Commented 22/09/2017 às 18:54
  • Nao basta voce passar um parametro via props e usar um :class="{'CLASS_COLLAPSE': isProps}" ? Commented 22/09/2017 às 19:02
  • Não entendi muito bem como eu usaria o Props como vantagem nesse caso... Eu fiz uma imagem caso consiga entender melhor como funciona as classes: i.imgur.com/P0m8S1M.jpg
    – Jackson
    Commented 22/09/2017 às 19:09

1 Resposta 1

1

Cara, se eu entendi o que você quer fazer, uma solução seria essa...

Hello.vue

<template>
  <div class="hello">
      <Menu :prop="{collapse: 'segundo'}" />
  </div>
</template>

<script>
import Menu from './Menu'
export default {
  data () {
    return {

    }
  },
  components: { Menu }
}
</script>
<style>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

ul{
  list-style: none;
}

ul li{
  display: block;
}

ul li .collapse{
  display: block !important;
}

ul li .collapseIn{
  display: none;
}
</style>

Menu.vue

<template>
    <div>
        <ul id="menu">
            <li>
                PRIMEIRO
                <ul :class="{'collapse': collapse == 'primeiro'}" class="collapseIn">
                    <li>1</li>
                    <li>2</li>
                </ul>
            </li>
            <li>
                Segundo
                <ul class="collapseIn" :class="{'collapse': collapse == 'segundo'}">
                    <li>1</li>
                    <li>2</li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                collapse: 'primeiro'
            }
        },
        props: ['prop'],
        mounted(){
            this.collapse = this.prop.collapse
        }
    }
</script>

Dessa maneira, bastaria você alterar a prop para mudar o collapse, caso não seja isso, eu entendi errado, ai peço que explique melhor para que eu possa entender. Já que o collapse depende dessas classes para identificar se está aberto ou fechado, a forma correta de fazer isso, é trabalhar dessa maneira com o :class

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .