VueJS Menu Collapse

Question

VueJS Menu Collapse

Navigation

#1 by (1 votes)

0

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

Thank you!

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>

javascript vue.js

asked by anonymous 22.09.2017 / 19:27

1 answer

CPF Mask and Birth Date Asp.net MVC Save multiple records in the bank

score 1 · Answer 1

Dude, if I understood what you want to do, a solution would be this ...

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>

In this way, you only have to change the prop to change the collapse , otherwise, I got it wrong, so please explain better so I can understand. Since collapse depends on these classes to identify whether it is open or closed, the correct way to do this is to work this way with :class