Currently diving into Vue.JS (2) and exploring the world of components. My current challenge involves using a component within another component, grabbing data from a data method. Here's what I have so far:
HTML
<div id="root">
<h1>Tasks</h1>
<list></list>
</div>
JS
Vue.component('list', {
template: '<task v-for="task in tasks">{{ task.task }}</task>',
data: function() {
return {
tasks: [
{task: 'Go to the store', completed: false},
{task: 'Go to the shop', completed: true},
{task: 'Go to the mall', completed: true}
]
};
}
});
Vue.component('task', {
template: '<li><slot></slot></li>'
});
new Vue({
el: '#root'
});
The result is currently displaying only a blank screen. However, when I replace the data with a string within the task template, it does show the string. This indicates that the "task" component works inside the "list" component.
Vue.component('list', {
template: '<task>Test</task>',
});
Vue.component('task', {
template: '<li><slot></slot></li>'
});
new Vue({
el: '#root'
});
It seems like there might be an issue with rendering data using the method/data. Despite attempting various approaches, I haven't been able to resolve it.
If you have any insights or solutions, your help would be greatly appreciated. Thank you!