Struggling to solve this particular issue. I have a primary wrapper element that utilizes another element to display the navigation structure.
The navigation can have multiple levels, so it needs to be dynamically generated.
This is how the wrapper looks:
<template>
<nav v-if="this.navigation.length">
<link-role :collection="navigation"></link-role>
</nav>
</template>
<script>
import LinkRole from './Formats/LinkRole';
export default {
components: {
'link-role': LinkRole,
},
props: {
navigation: {
type: Object,
default: () => { return {} }
}
}
}
</script>
and the LinkRole component like this:
<template>
<ul>
<li v-for="(item, index) in collection" :key="index">
<a v-if="item.url" :href="item.url" v-text="item.name"></a>
<span v-else v-text="item.name"></span>
<link-role v-if="item.items" :collection="item.items"></link-role>
</li>
</ul>
</template>
<script>
import LinkRole from './LinkRole';
export default {
components: {
'link-role': LinkRole,
},
props: {
collection: {
type: [Object, Array],
default: () => []
}
},
}
</script>
Within the LinkRole component, I'm iterating over items in the collection and recursively using LinkRole if there are more items at another level.
However, I'm encountering the following warning message:
[Vue warn]: Failed to mount component: template or render function not defined.
I'm struggling to determine the cause of this error. Any insights would be greatly appreciated.