Laravel and Vue.js put method using fetch

Question

I'm encountering an error with the put method [![enter image description here][1]][1]

I'm using axios for post and fetch for put. I don't know how a put method will work on axios so if anyone could help I would really appreciate it.

Component.vue script

editItem (item) {
        this.dialog = true
        this.editedIndex = this.departments.indexOf(item)
        this.id = item.id;
        this.department = item.department_name;

      },
  save() {
    const { department } = this
    if (this.editedIndex > -1) {
      fetch('/api/department', {
        method: 'put',
        body: JSON.stringify(this.department),
        headers: {
          'content-type': 'application/json'
        }
      })
    } else {
      axios 
      .post('/api/department', { department })
      .then(response => this.initialize())
      .catch(error => console.log(error))
    }
    this.close()
  },

Controller

public function store(Request $request) {
    $department = $request->isMethod('put') ? Department::findOrFail($request->id) : new Department;

    $department->id = $request->input('id');
    $department->department_name = $request->input('department');

    if($department->save()) {
      return response()->json($department);;
    }
  }

API

Route::get('departments', 'DepartmentController@index');
Route::get('department/{id}', 'DepartmentController@show');
Route::post('department', 'DepartmentController@store');
Route::put('department', 'DepartmentController@store');
Route::delete('department/{id}', 'DepartmentController@destroy');

The post method works but not for put as seen with the error posted above.

Nothing in this question is adding up. Your initial error message has a 404 status but your Postman example has 405 and for some reason, is detecting a GET request. Also, your URLs are different, the first is /api/department and the second is /api/department/ — Phil
– Phil, Commented Dec 16, 2019 at 2:58
Removed screenshot. It was actually a fault of a test select box that also uses get department — Jim E Russel
– Jim E Russel, Commented Dec 16, 2019 at 4:38

Trace · Accepted Answer · 2019-12-15 10:40:10Z

2

It's because you didn't implement a put method in the backend. The exception indicates that the put request is made, so the problem is probably not related to Axios.

Route::put('foo/bar', function()
{
    //
});

Edit: If you make a PUT request, it's supposed to be sent to an endpoint that concerns a resource (to either create or update). It is an idempotent request, meaning that if you send the request, it will cause the same result regardless whether you sent it once or multiple times.
Please try something like this:

Route::put('department/{id}', 'DepartmentController@update')

public function update(Request $request, $id)  {

And make sure that the request method adds the id as path parameter in the request.

edited Dec 15, 2019 at 10:40

answered Dec 15, 2019 at 10:07

Trace

18.9k21 gold badges98 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jim E Russel Over a year ago

I do have an API if that's what you are referring to. The post method works but not for put. I have now posted my API.

Trace Over a year ago

Ok, it's probably related to Laravel, I'll take a look. Btw it's useful to install something like Postman (or any rest client like curl or other) to verify the endpoints if you are uncertain about whether it concerns Axios.

Trace Over a year ago

Could you check if the update makes any difference?

Jim E Russel Over a year ago

Thank you very much. I did try postman and this is the result, please refer to the edited question above. It seems like there is indeed a problem with Laravel.

Jim E Russel Over a year ago

I'll try your recommendation. EDIT: After putting {id} it became 405 (method not allowed)

|

Jim E Russel · Accepted Answer · 2019-12-16 01:52:45Z

0

UPDATE: I have now successfully make it work. I'll share it to everyone in case other people new to laravel and vue might encounter the same problem.

This is now the working code, using axios.

save() {
    const { department, id } = this
    if (this.editedIndex > -1) {
      axios 
      .put('/api/department', { department, id })
      .then(response => this.initialize())
      .catch(error => console.log(error))
    } else {
      axios 
      .post('/api/department', { department })
      .then(response => this.initialize())
      .catch(error => console.log(error))
    }
    this.close()

I think sleep helps a lot when you're stuck in a problem.

answered Dec 16, 2019 at 1:52

Jim E Russel

49511 silver badges33 bronze badges

5 Comments

Phil Over a year ago

I fail to see how this is functionally different to your original client-side code. I suspect you've actually changed something server-side and the original code would actually work now

Jim E Russel Over a year ago

Aside from using axios, id is now included in the put method in which it is not included with the first fetch method that I used.

Phil Over a year ago

Wouldn't change the URL at all and so wouldn't fix a 404 response status

Trace Over a year ago

@JimERussel Isn't that sort of exactly what I put in my answer lol? Please accept if it was useful.

Jim E Russel Over a year ago

I didn't put an $id in the controller and route. Done.

Collectives™ on Stack Overflow

Laravel and Vue.js put method using fetch

2 Answers 2

7 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related