Vue(with laravel) does not render submenu after login redirected

  laravel, vue.js

I have vue with laravel api. Below is vue login code.

    methods:{
        login(){
            axios.post('/api/login',this.form)
            .then(res => {
                this.$router.push({ name: 'dashboard'})
            })
            .catch()
        }
    }

After Dashboard mouted, role api is called.

    mounted(){
        this.userRole()
    },
    methods:{
        userRole(){
            axios.defaults.headers.common = {
                'Authorization': 'Bearer ' + this.token
            };
            axios.post('/api/role/user/show')
            .then(res => {
                this.role = res.data.roles[0];
            })
            .catch()
        }
    }

And I render them to sidebar menu. I have 2 v-for, outside for parent menu and inside for submenu.

                <li class="nav-item" v-for="(_module,index) in role.modules" :key="index">
                    <a href="#" class="nav-link"><p>{{_module.name}}<i class="right fas fa-angle-left"></i></p></a>
                    <ul class="nav nav-treeview">
                        <li v-for="(task,_index) in _module.tasks" :key="_index" class="nav-item">
                            <a href="#" class="nav-link"><p>{{task.name}}</p></a>
                        </li>
                    </ul>
                </li>

But only external v-for is renderred, the inside is not. Any advise or guidance would be greatly appreciated, Thanks.

Source: Laravel

Leave a Reply