TheBlueDragon's avatar

how to make delete request with vuejs resource ?

hello iam trying to make delete request with vuejs as i read in https://github.com/vuejs/vue-resource

they have this.$http.delete so i was think this delete can be accepted by laravel but it was wrong in console it give me

Failed to load resource: the server responded with a status of 405 (Method  Not Allowed)

this is my view

                            <a href="#" title="Delete {{ $manufacturer->name }}" v-on="click: deleteItem({{ $manufacturer->id }})" ><i class="fa fa-trash-o"></i></a>

this is my js method

deleteItem: function(id){

            console.log(this.$http.delete('manufacturer', id));
        }
0 likes
12 replies
TheBlueDragon's avatar

@bobbybouwmann you mean in routes.php ?? yes this.$http.delete('manufacturer', id);

as you can see the string manufacturer is the route i have in my routes.php and its a resource >> i use same thing for creating a new manufacturer and i use $http.post and work fine also the get method but not working with delete !!

i will take a look on this tutorial thank you very much

kfirba's avatar

@TheBlueDragon Usually when trying to make a delete-action form (or put and patch forms) we "inject" a _method hidden input:

<input type="hidden" name="_method" value="DELETE">

Try to pass a _method="DELETE" variable as-well maybe.

TheBlueDragon's avatar

@kfirba yes i use this way when i using the normal ajax the thing i was using the delete request from an anchor tag so i dont have an open form to attach this

also i try something in my request

                console.log(this.$http.delete('manufacturer/'+id));

and actually it delete the item from my database but in the console its give

Failed to load resource: the server responded with a status of 405 (Method  Not Allowed)

so is this wrong way ? how the request pass and the response is 405 !!

my controller

have this only

 Manufacturer::destroy($id);
TheBlueDragon's avatar

@bobbybouwmann

my routes.php

Route::resource('manufacturer', 'ManufacturersController');

my controller method

public function destroy($id)
    {
        Manufacturer::destroy($id);

        return redirect()->action('ManufacturersController@index');
    }

my js function

deleteItem: function(id){
                console.log(this.$http.delete('manufacturer/'+id));
            }

my view

                        <a href="#" title="Delete {{ $manufacturer->name }}" v-on="click: deleteItem({{ $manufacturer->id }})" ><i class="fa fa-trash-o"></i></a>
bobbybouwmann's avatar

The code looks fine to me. Shouldn't you be handeling the redirect with VueJS?

TheBlueDragon's avatar

@bobbybouwmann i dont need redirect that line i will delete later on because i will make the list update it self but for now i need only to know why in the console show me this error

Failed to load resource: the server responded with a status of 405 (Method Not Allowed)

what is the wrong !!

bobbybouwmann's avatar
Level 88

Well I think because of the redirect, but I'm not sure about it!

1 like
Chalkin's avatar

Sorry to hijack this post but it's related to the same issue and i didn't see any progress/result here.

I'm currently trying the same. But I'm just getting a 403 error on the request. Currently I'm trying it with $resource - before i tried with $http but only had the same 403 but resulted in wrong url. (api/v1/vehicles and with $resource it's going to api/v1/vehicles/1)

deleteEntry: function(item) {
            // delete item
            this.$resource('api/v1/vehicles/:id').delete({id: 1}, function (data, status, request) {
                // handle success
            }).error(function (data, status, request) {
                // handle error
            })
},

routes.php

Route::group(array('prefix' => 'api/v1'), function()
{
    Route::resource('vehicles', 'VehicleApiController');
});

controller

public function destroy($id)
    {
        $vehicle = Vehicle::find($id);
        $vehicle->delete();
    }

html

<button class="btn btn-danger" v-on="click: deleteEntry(vehicle)">Delete</button>

Please or to participate in this conversation.