I'm currently in the process of learning Vue.js. This is my first attempt at creating a small to-do application, and I am encountering issues with deleting each individual task upon clicking. Despite watching multiple YouTube tutorials, I have not been able to resolve the problem. Any assistance would be greatly appreciated!
I believe the issue lies in properly passing through the $emit and the id.
If you know of any helpful tutorials, please feel free to share them!
App.vue
<template>
<Tasks :tasks="tasks" @delete-task="deleteTask" />
</template>
<script>
import Tasks from "./components/Tasks.vue";
export default {
name: "App",
components: {
Tasks,
},
data() {
return {
tasks: [],
};
},
methods: {
deleteTask(id) {
this.tasks = this.tasks.filter((task) => task.id !== id);
},
addTask(newTask) {
this.tasks = [...this.tasks, newTask];
},
},
created() {
this.tasks = [
{
id: 0,
text: "Grocery shopping",
date: "March 25, 2022",
reminder: true,
},
{
id: 1,
text: "Doctors Appointment",
date: "March 30, 2022",
reminder: true,
},
{
id: 2,
text: "Pay Bills",
date: "April 1, 2022",
reminder: false,
},
];
},
};
</script>
Tasks.vue
<template>
<div>
<Task :tasks="tasks" @delete-task="$emit('delete-task')" />
</div>
</template>
<script>
import Task from "./Task.vue";
export default {
name: "Tasks",
emits: ["delete-task"],
components: {
Task,
},
props: {
tasks: Array,
},
};
</script>
Task.vue
<template>
<div v-for="task in tasks" :key="task.id" @click="onDelete(task.id)">
<p>{{ task.text }}</p>
<p>{{ task.date }}</p>
</div>
</template>
<script>
export default {
name: "Task",
emits: ["delete-task"],
props: {
tasks: Object,
},
methods: {
onDelete(id) {
this.$emit("delete-task", id);
},
},
};
</script>