Vuejs Menu Collapse

Asked

Viewed 354 times

0

I have a dynamic menu that comes from a REST API.
My problem is: Today when I access some page, all menus come closed. I wanted when I entered for example in a page 3° level, the menu opened according to where the user is, for him to locate.
To my ul open, I need to put the class collapse in. I made the condition of :class on my tag a and it works, should I use it on condition to open my ul ?

Thank you!

Menu.:

<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>
javascript vue.js

  • It would be interesting to put more code, just with that and it is difficult to help.

  • @Rafaelaugusto I put the entire Menu. this parameter "Route" is the name of the route.

  • If I access the Page Test 3 in the direct URL, I wanted the ul already came with the Collapse in in its class ( Already come open )

  • It is not enough to pass a parameter via props and use a :class="{'CLASS_COLLAPSE': isProps}" ?

  • I don’t quite understand how I would use Props to my advantage in this case... I made an image if I can better understand how classes work: https://i.imgur.com/P0m8s1m.jpg

  • You’re using routes, right?

  • Let’s go continue this discussion in chat.

Show 2 more comments

1 answer

1

Man, if I understood what you want to do, one solution would be this...

Hello.

<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.

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

That way, you could just change the prop to change the collapse, If not, I got it wrong, so I ask you to explain it better so I can understand. Since the collapse depends on these classes to identify whether it is open or closed, the correct way to do this, is to work in this way with the :class

Browser other questions tagged javascript vue.js

You are not signed in. Login or sign up in order to post.