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?