I'm having trouble understanding how to properly use x-template for a subcomponent within a VueJS component.
My component, CategoryNav.vue, has a template that uses an x-template to display a list. However, when I render the page, the component created with the x-template is not being recognized. I believe I may be using it incorrectly. Any assistance would be greatly appreciated. Below is the code for my main component.
CategoryNav.vue
<template>
<div class="">
<menu-list :items="treeList"></menu-list>
</div>
</template>
<script type="text/x-template" id="menu-list-template">
<ul v-if="items.length">
<li v-for="item of items">
<a :href="item.value">{{ item.label }}{{ item.id }}</a>
<menu-list :items="item.children"></menu-list>
</li>
</ul>
</script>
<script>
const MenuList = {
name: 'menu-list',
template: '#menu-list-template',
props: ['items']
}
export default {
name: 'category-nav',
components: {
MenuList
},
computed: {
list () {
return this.$store.state.topics
},
treeList () {
const items = this.list.map(item => Object.assign({}, item, { children: [] }))
const byValue = new Map(items.map(item => [item.value, item]))
const topLevel = []
for (const item of items) {
const parent = byValue.get(item.parent)
if (parent) {
parent.children.push(item)
} else {
topLevel.push(item)
}
}
return topLevel
}
}
}
</script>