Starting with Vue.js is exciting, but there may be some obvious things that I'm missing out on. As a practice exercise, I attempted to create a simple treeView component (with a subcomponent 'treeViewItem'). The only property in the treeView is the list of items: items
Below is the treeView component:
@Component
export default class treeView extends Vue {
@Prop({
required: true
})
items!: treeViewItemOptions[];
}
Initialization of 'Vue' looked like this :
let v = new Vue({
el: "#app",
template: `
<div>
<tree-view :items="items" />
</div>
`,
data: {
items: treeViewItems
}
});
An error occurred stating: '[Vue warn]: Missing required prop: "items"
I am using typescript along with vue-property-decorator
Currently running Vue 2.5.16 and vue-property-decorator 6.0.0
Thank you,
Edit 1
In an attempt to troubleshoot, I replaced the <treeViewItem> with a basic <li> in the treeView.vue file:
<template>
<ul>
<!-- it works if I replace the following <treeViewItem> for <li> -->
<treeViewItem v-for="item in items" v-bind:key="item.id" v-bind:item="item"></treeViewItem>
</ul>
</template>
No errors were thrown regarding the 'items' prop, and I even noticed a few <li> elements generated in the html code, indicating that the items are functioning correctly. However, there seems to be an issue when using my treeViewItem component!
Here is the other component :
@Component
export default class treeViewItem extends Vue {
@Prop({
required: true
})
item!: treeViewItemOptions[];
}