Estoy tratando de aprender Vue.js. Es la primera vez que hago una pequeña aplicación de tareas pendientes y trato de eliminar cada tarea individual al hacer clic, pero no sucede nada. He estado viendo un montón de tutoriales de YouTube para tratar de resolverlo, pero no tuve suerte :( ¡Se agradece cualquier ayuda! No creo que esté pasando el $emit y el id correctamente.

Además, si alguien tiene algún tutorial útil, ¡hágamelo saber!

aplicación.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>

Tareas.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>

Tarea.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>