Vue.component('tree-items', {
template: '#tree-template',
props: {
item: {
type: Object,
required: true,
},
},
data: function () {
return {
isOpen: false,
page: {},
navigation: {},
};
},
computed: {
hasChildren: function () {
return this.toArray(this.item.children).length;
},
hasItems: function() {
if (!this.isUndefined(this.items)) {
return this.items.length;
}
return 0;
},
},
methods: {
toggle: function () {
if (this.hasChildren) {
this.isOpen = !this.isOpen
}
},
setItem: function (_item) {
this.item = _item;
}
},
mounted: function () {
this.setItem(this.item);
}
});<ul v-for="item in items" :key="item.id">
<tree-items
:item="item"
></tree-items>
</ul>
<script type="text/x-template" id="tree-template">
{{ item }}
</script>
<script type="text/x-template" id="tree-template"> {{ item }} </script>
li - вы же внутри ul пытаетесь их выводить:<script type="text/x-template" id="tree-template">
<li>{{ item }}</li>
</script><ul v-for="item in items" :key="item.id"> <tree-items :item="item" ></tree-items> </ul>
v-for внутрь списка (кстати, а какого чёрта в имени компонента элемента списка множественное число? почему items, а не item?):<ul>
<tree-items
v-for="item in items"
:key="item.id"
:item="item"
></tree-items>
</ul>
