Laravel resource route delete from axios

Question

I would like to setup axios to delete a record using a resource route:

axios.delete('/job-management', this.deletedata).then((res)=>{
    console.log(res);
})

For my routes I have:

Route::resource('job-management', "PositionsController", [ 'as' => 'jobs']);

Now, in my PositionsController I have:

public function destroy(Positions $positions) {
    return $positions;
}

But the above always returns "method not allowed". How can I handle a delete request with the axios delete() method?

Answer 1

Laravel throws the MethodNotAllowedHttpException when we attempt to send a request to a route using an HTTP verb that the route doesn't support. In the case of this question, we see this error because the JavaScript code sends a DELETE request to a URL with the path of /job‑management, which is handled by a route that only supports GET and POST requests. We need to change the URL to the conventional format Laravel expects for resourceful controllers.

The error is confusing because it hides the fact that we're sending the request to the wrong URL. To understand why, let's take a look at the routes created by Route::resource() (from the documentation):

Verb        URI                             Action  Route Name
GET         /job-management                 index   job-management.index
GET         /job-management/create          create  job-management.create
POST        /job-management                 store   job-management.store
GET         /job-management/{position}      show    job-management.show
GET         /job-management/{position}/edit edit    job-management.edit
PUT/PATCH   /job-management/{position}      update  job-management.update
DELETE      /job-management/{position}      destroy job-management.destroy

As shown above, URLs with a path component of /job-management are passed to the controller's index() and store() methods which don't handle DELETE requests. This is why we see the exception.

To perform a DELETE request as shown in the question, we need to send the request to a URL with a path like /job-management/{position}, where {position} is the ID of the position model we want to delete. The JavaScript code might look something like:

axios.delete('/job-management/5', this.deletedata).then((res) => { ... })

I've hardcoded the position ID into the URL to clearly illustrate the concept. However, we likely want to use a variable for the this ID:

let positionId = // get the position ID somehow
axios.delete(`/job-management/${positionId}`, this.deletedata).then((res) => { ... })

The URL in this form enables Laravel to route the DELETE request to the controller's destroy() method. The example above uses ES6 template string literals because the code in the question suggests that we're using a version of JavaScript that supports this feature. Note the placement of backticks (`) around the template string instead of standard quotation marks.

Answer 2

as I can see in your code above, you pass Positionseloquent as a parameter to destroy method but in your vueJS you don't pass this object. for that you would pass it like this :

axios.delete('/job-management/${id}').then((res)=>{
    console.log(res);
})

and the id param inside the url of ur axios delete, it can object of data or any think.

i hope this help you