Laravel Resource Route remove from axios

Question

I would like to configure axios to delete the record using the resource route:

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

For my routes, I:

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

Now, in my PositionsController I have:

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

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

Answer 1

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

The error is confusing because it hides the fact that we are 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 the /job-management path component are passed to the index() and store() control methods that do not process DELETE requests. That is why we see an exception.

In order to execute a DELETE request, as shown in the question, we need to send a request to the URL with a path such as /job-management/{position} , where {position} is the identifier of the model of the position that we want to delete. JavaScript code might look something like this:

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

I hard coded the position identifier in the URL to illustrate the concept. However, we most likely want to use a variable for this ID:

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

The URL in this form allows Laravel to send a DELETE request to the destroy() controller. The above example uses ES6 template template literals because the code in the question assumes that we are using a version of JavaScript that supports this function. Note the placement of inverse elements ( ` ) around the pattern line instead of the standard quotation marks.

Answer 2

as I see in your code above, you are passing Positions eloquent as a parameter to the destroy method, but in your vueJS you are not passing this object. for this you would pass it like this:

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

and id-pairs in url ur axios delete, it can represent a data object or any think.

Hope this helps you.