# [Vue.js] Deleting an object with Axios, Vue, Laravel

i’m trying to delete an object both from my view & my mySQL DB, however i’m encountering this error:
DELETE http://localhost:8000/api/machines/$object%20MouseEvent$ 404 (Not Found)

If i remove the axios call, this method deletes the object from the view (of course when i reload the page it’s back because i don’t persist it to the DB.

Here’s how the method looks:

removeElement(index) {
axios
.delete(“machines/“ + index)
.then(res => {
confirm(“Are you sure you want to delete this item?”) &&
this.machines.splice(index, 1);
})
.catch(err => {
console.log(err);
});
},

Here’s how the route looks:

Route::delete(‘machines/{id}’, [
‘as’ => ‘machines/{id}’,
‘uses’ => ‘MachineController@destroy’
]);

And here’s how the controller looks:

public function destroy(Request $request,$id)
{
$machines = Machine::findOrFail($request->id)->delete();
}

Can someone help me out or atleast point me in the right direction? Thanks in advance!

### Solution :

http://localhost:8000/api/machines/$object%20MouseEvent$

this isnt correct URL. Looks like you need to get machine ID instead and use it request.

Try to use removeElement(machine.id) instead of that you are doing now.

If that’s not enough, please share vue/js code with removeElement call in it