[Vuejs]-Why the delete button is deleting all af the items instead a single one?

by

0👍

✅

Correct me if I’m wrong but shouldn’t be that you are passing in the task ID of the task you want to delete and not the user ID?

<button @click="() => deleteTask(task.id)" class="delete">
  Delete
</button>

Compare to :

    <button @click="() => deleteTask(task.userId)" class="delete">
      Delete
    </button>

Update :

There it work for me :

 async deleteTask(context, id) {
    const res = await fetch(`https://dummyjson.com/todos/${id}`, {
      method: 'DELETE',
    })
      .then((res) => res.json())
      .then(console.log);
    if (res) {
      let result = await res.json();
      context.dispatch('getTasks');
    }
    return res;
  }
completed: true
deletedOn: "2023-05-06T14:01:35.302Z"
id: 103
isDeleted: true
todo: "Go to a local thrift shop"
userId: 5

I did as I mention above and added the task.id instead of user.id and then I removed the res.ok just to res.

Then added .then and removed the headers. I don’t think it matters but I looked at the docs and the example didn’t use it so.

The only thing left for you is to update the list and maybe add some error handling if something doesn’t goes as planned.

Update :

To fix that the list isnt render is because you need ot update the state of tasks in the store. Right now the deleteTask action is dispatching the getTasks which fetches the tasks from the server and updates the store.

But its asynchronous, so the state may not be updated before the component is rerendered. That’s why the list is "right" in the console logs but not as you see it in the actual DOM tree.

async deleteTask(context, id) {
  const res = await fetch(`https://dummyjson.com/todos/${id}`, {
    method: 'DELETE',
  });
  if (res.ok) {
    // filter the tasks in the state to remove the deleted task
    const tasks = context.state.tasks.filter(task => task.id !== id);
    context.commit('setTasks', tasks);
  }
  return res.ok;
}

Now this will update the state of the tasks in the store immediately and the component will rerender with the updated list.

I went with the res.ok and tried to keep it as your code looked from the start.

0👍

The issue is not with the DELETE functionality!!
When I looked the code and the API responses, the issue is not with the delete functionality.
The issue is with the todos/add API through which you create a new task.
I could see the response with json including the completed: false, indicating that the task has not been created.

Then why is it showing as a new task when created and why all new tasks are vanishing on deleting a particular task ?

  1. While creating a new task, you are appending the task to your tasks list when the API response is OK. (of course, the API is responding with OK status though the task is not being stored )
  2. Once after deleting of a particular task, You are re-fetching the task list from the server ( and it’ll give only those tasks which are being stored. And as I mentioned earlier, no task is being saved so it appears that it deleted all the tasks instead of one

What to do now ?
You better go, look at the backend where you wrote the code to store the tasks and check why it’s not being stored.

NOTE : Once after creating the tasks, you are looking at the status to be OK, you better also look for the response with containing completed : true

Leave a comment