Delete Method in Axios, Laravel and VueJS

Question

I am trying to send a delete request via axios to laravel as follow:

axios.delete(\'api/users/\' + this.checkedNames)
.then((response) => {
    console.log         


        

Answer 1

I was having issue to send data as model while making delete request. I found a fix as follows:

deleteCall (itemId, jsonModel) {
return api.delete(`/users/${itemId}/accounts/`, {data: jsonModel})
},

Answer 2

Deleting users in array

Other good option, is to convert javascript array to string, and pass it has the required parameter, instead of passing object. Here the example:

In Vue.js 2.5.17+

//Use the javascript method JSON.stringify to convert the array into string: axios.delete('api/users/' + JSON.stringify(this.checkedNames))

In Laravel 5.3+

//Resource default route (you don't need to create, it already exists)
Route::delete('api/users/{id}', 'UserController@destroy'); 

//In laravel delete method, convert the parameter to original array format 
public function destroy($id)
{
    User::destroy(json_decode($id); //converting and deleting users in array 'id'
}

Deleting single user by id

Just pass the id. You don't need to convert it.

In Vue.js 2.5.17+

axios.delete('api/users/' + id)

In Laravel 5.3+

You can name the parameter as you wish: user, id, item ,...

In Laravel 5.6+ < is named as $id //this can be the id or the user object
In Laravel 5.7+ > is named as $user //this can be the id or the user object

public function destroy($id)
{
    User::destroy($id); 
}

Answer 3

It is because of the method signatures. The default delete route when using Resource expects a single parameter. So when doing:

axios.delete('api/users', {params: {'id': this.checkedNames})

you are missing a required parameter. The route definition is

Route::delete('api/users/{id}', 'UserController@destroy');
// You are missing `id` here. So it won't work. 

Usually, if you are going to stray away from the default behavior, it is recommended to create your own function. So you could leave the default destroy($id) function as is to delete a single entry and write a new function that will delete many. Start by adding a route for it

Route::delete('api/users', 'UserController@deleteMany');

Then define the function to handle it

public function deleteMany(Request $request)
{
    try 
    {
        User::whereIn('id', $request->id)->delete(); // $request->id MUST be an array
        return response()->json('users deleted');
    }

    catch (Exception $e) {
        return response()->json($e->getMessage(), 500);
    }
}

To summarise, your problem came from route definition. Your route from Axios did not match the route definition from Laravel, hence the 405.

Answer 4

I also experienced the same problem. This works for me:

deletePost: function(id) {
                axios.post('/posts/'+id,{_method: 'delete'})
            }

Using axios.post() instead of axios.delete, and sending _method "delete"