I've been attempting to create a recursive menu in Vue.js, but I keep encountering an error and I'm struggling to identify the issue. Here is my current structure:
MenuList.vue
<template>
<ul class="menu">
<MenuLink v-for="menuItem in menuObject" :menuItem="menuItem" :key="menuItem.i"></MenuLink>
</ul>
</template>
<script>
import MenuLink from './MenuLink'
export default {
name: 'MenuList',
components: {MenuLink},
props: ['menuObject'],
data () {
return {
}
}
}
</script>
And MenuLink.vue
<template>
<li>
<a href="#">
{{ menuItem.resourceKey }}
</a>
<MenuList :menuObject="menuItem.subMenuItems" v-if="menuItem.subMenuItems"></MenuList>
</li>
</template>
<script>
import MenuList from '@/components/common/menu/MenuList'
export default {
name: 'MenuLink',
components: {MenuList},
props: ['menuItem'],
data () {
return {
}
}
}
</script>
However, when the MenuList component is included inside MenuLink, the following error is displayed:
[Vue warn]: Unknown custom element: <MenuList> - did you register the component correctly?
For recursive components, make sure to provide the "name" option.
found in
---> <MenuLink> at src\components\common\menu\MenuLink.vue
<MenuList> at src\components\common\menu\MenuList.vue
I am stuck on what might be causing this problem. Does anyone have any insights?