Back

Technologies:

javascriptjavascript
vue.jsvue.js
avatar
Tolerim
a month ago

How come the delete button is removing all the items instead of just one?

The issue is that when a new to-do item is created in the list, clicking the delete button results in the deletion of all newly added tasks instead of just the one with the specified ID. The expected behavior is for only the selected task with the provided ID to be deleted. To address the issue, modifications to the script should be made. The child component includes a button element with an event listener attached that triggers the deleteTask method to be executed. This method dispatches an action to delete the selected task from the list using its ID as a parameter. The parent component renders each task by iterating over the array of tasks, passing each task to the child component as a prop. The Vuex store is responsible for managing the state of tasks and deleting the selected task.
Answers(1)
avatar
Tolerim
a month ago
Verified Answer
The issue is with the way the deleteTask method is defined in the Task component. The deleteTask method takes the id of the task as a parameter, but in the template, it is called without passing any parameter: @click="() => deleteTask(task.userId)". This means that the id parameter will always be undefined, and the deleteTask action will be called without any id, which will result in all tasks being deleted instead of just the one with the passed id. To fix this issue, you need to pass the id parameter to the deleteTask method when calling it in the template. You can do this by changing the template in the Task component like this: 
<template>
  <p class="content">
    {{ task.todo }}
  </p>
  <button @click="deleteTask(task.userId)" class="delete">
    Delete
  </button>
</template>
By removing the arrow function () =>, we can pass the task.userId directly to the deleteTask method. This will ensure that only the task with the passed id is deleted when the delete button is clicked.
;