I'm reaching out again because I'm struggling to figure out what I'm doing wrong. I followed a tutorial step by step but the code isn't working as expected. My goal is to toggle between marking tasks as done and not done. When I test the code, nothing happens and there are no error messages. I've tried reading the documentation, but it's still unclear to me. I'm relatively new to programming.
let bus = new Vue();
let Task = {
props: ['task'],
template: `
<div class="task" :class="{ 'task--done' : task.done , 'task-notdone' : task.done === false }">
{{ task.body }}
<a href="#" v-on:click.prevent="toggleDone(task.id)">Mark me as {{ task.done ? 'not done' : 'done' }}</a>
</div>
`,
methods: {
toggleDone(taskId) {
bus.$emit('task:toggleDone', taskId);
}
}
};
let Tasks = {
components:{
'task': Task
},
data() {
return {
tasks: [
{id: 1, body: 'Task One', done: false },
{id: 2, body: 'Task Two', done: true },
{id: 3, body: 'Task Three', done: true }
],
}
},
template: `
<div>
<template v-if="tasks.length">
<task v-for="task in tasks" :key="task.id" :task="task"></task>
</template>
<span v-else>No tasks</span>
<form action="">
form
</form>
</div>
`,
methods: {
toggleDone(taskId){
let task = this.tasks.find(function (task) {
return task.id === taskId;
});
console.log(task);
}
},
mounted () {
bus.$on('task:toggleDone', (taskId) => {
this.toggleDone(taskId);
})
},
};
let app = new Vue({
el:'#app',
components: {
'tasks': Tasks,
},
});