I want to render a nested list with Vue.js, but my code fails at nested component part. My main template:
<body>
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
<ul>
<todo-item v-for="subtodo in todo.subTodos" v-bind:subtodo="subtodo"></todo-item>
</ul>
</li>
</ul>
</div>
</body>
And my js file:
Vue.component('todo-item', {
template: '<li>{{subtodo.text}}</li>',
prop: ['subtodo']
})
var app = new Vue({
el: '#app',
data: function () {
return {
todos : [
{
text : 'Learn JavaScript',
subTodos : [
{ text : 'Linting'},
{ text : 'Bundling'},
{ text : 'Testing'}
]
},
{
text : 'Learn Vue',
subTodos : [
{ text : 'Components'},
{ text : 'Virtual DOM'},
{ text : 'Templating'}
]
},
{
text : 'Build something awesome',
subTodos : [
{ text : 'Build'},
{ text : 'Something'},
{ text : 'Awesome'}
]
}
]
}
}
})
Basically at the first level I render an array with v-for, then I pass an instance to the subcomponent for another iteration, and I also v-bind the current instance so that I can use it in the child's template.
I have a working fiddle here: https://jsfiddle.net/ny7a5a3y/4/
The console gives me this error:
[Vue warn]: Property or method "subtodo" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
What am I missing?
