Vue 3 Recursive Component Causing Infinite Setup Call

Viewed 387

I am trying to build a sidebar that render menu dynamically depends on menu data provided.

Here is my TheSideBarMenu.vue

<template>
    <ul class="nav flex-column pt-3 pt-md-0">
        <li class="nav-item" v-for="m in menu" :key="m.path">
            <router-link v-if="m.children.length===0" class="nav-link" :to="m.to">
                <span class="sidebar-icon"><span :class="m.icon"></span></span>
                <span class="sidebar-text">{{ m.label }}</span>
            </router-link>
            <span v-if="m.children.length > 0" class="nav-link  collapsed  d-flex justify-content-between align-items-center" data-bs-toggle="collapse" data-bs-target="#submenu-app">
                <span>
                    <span class="sidebar-icon"><span class="fas fa-user"></span></span>
                    <span class="sidebar-text">Users</span>
                </span>
                <span class="link-arrow"><span class="fas fa-chevron-right"></span></span>
            </span>
            <div v-if="m.children.length > 0" class="multi-level collapse" role="list" id="submenu-app" aria-expanded="false">
                <the-side-bar-menu :menu="m.children" />
            </div>
        </li>
    </ul>
</template>
<script>
export default {
    name: "TheSideBarMenu",
    props: {
        menu : Array
    },
    setup(props) {
        console.log('sidebarmenu',props.menu)
    },
}
</script>

and menu would like something like this

[
    {
        to : '/',
        label : 'Dashboard',
        icon : 'fas fa-chart-pie'
    },
    {
        to : '#',
        label : 'User',
        icon : 'fas fa-user',
        children : [
            {
                to : '/user',
                label : 'User List',
                icon : 'fas fa-chart-pie'
            },
            {
                to : '/user/create',
                label : 'Create User',
                icon : 'fas fa-chart-pie'
            }
        ]
    },
    {
        to : '/search',
        label : 'Search',
        icon : 'fas fa-chart-pie'
    }
]

The problem is when I put in a component template it call component's setup infinitely. Is my recursive component wrong or what?

0 Answers
Related