While diving into Vue.js, I encountered a puzzling issue - why isn't
<li>{{task.body}}</li>I've crafted a
<tasks v-for="task in tasks"></tasks>Check it out here: https://jsfiddle.net/pd03t1vm/
Here's a glimpse of the code:
<div id="app">
<tasks v-for="task in tasks"></tasks>
</div>
<template id="tasks-template">
<ul>
<li>{{task.body}}</li>
</ul>
</template>
And the JavaScript part:
Vue.component('tasks', {
template: '#tasks-template',
});
new Vue({
el: '#app',
data: {
tasks: [
{body: 'Task 1 Something', completed: false},
{body: 'Task 2 Something', completed: true},
{body: 'Task 3 Something', completed: false},
{body: 'Task 4 Something', completed: false}
]
}
});