axios.patch / axios.put is not working in Vue and Laravel

Question

I have this code in my vue file

saveProfile() {
    axios.patch('/api/pegawai/' + this.id, {
         data: this.data
    })
    .then(function (response) {
         console.log(response);
    })
    .catch(function (error) {
         console.log(error);            
    });
}

and in my laravel controller

public function update(Request $request, $id){
     return $this->sendResponse('request retrieved');
}

public function sendResponse($message){
    $response = [
        'success' => true,
        'message' => $message,
    ];
    return response()->json($response, 200);
}

when i run the vue file to pass the data to the controller it should give me a json response to the browser console with the following value

{
  'success' : true,
  'message' : 'request retrieved'
}

but currently it gives me an error 500 internal server error through the browser console. I get the same result if I replace axios.patch with axios.put.

--- What I Have Tried ---

I have tried to do axios.post and axios.get with the same scenarios as axios.patch and both working properly. Controller for post and get:

public function store(Request $request){
    return $this->sendResponse('request retrieved');
}

public function index(){  
    return $this->sendResponse('request retrieved');
}

So what is the actual response content coming back with the 500? It should contain a clue to the problem. — Joe
– Joe, Commented Jul 4, 2018 at 9:43
Could you please show the route declaration for these APIs? @Rafid — Adre Astrian
– Adre Astrian, Commented Jul 4, 2018 at 9:46
what error are you getting ? it will be easy if you add error in your question — rkj
– rkj, Commented Jul 4, 2018 at 9:47
@rkj the console only gives me 500 internal server error without other information — Rafid
– Rafid, Commented Jul 4, 2018 at 9:49

Hassanal Shah · Accepted Answer · 2020-05-30 14:03:37Z

22

actually HTTP PUT is not recognized by html standard. try to do hack like so:

saveProfile() {
    axios.post('/api/pegawai/' + this.id, { // <== use axios.post
         data: this.data,
         _method: 'patch'                   // <== add this field
    })
    .then(function (response) {
         console.log(response);
    })
    .catch(function (error) {
         console.log(error);            
    });
}

edited May 30, 2020 at 14:03

answered Jul 12, 2018 at 6:27

Hassanal Shah

3542 silver badges5 bronze badges

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

2 Comments

Fernando Torres Over a year ago

what if i'm using formData?

Shone Tow Over a year ago

@FernandoTorres formDataInstance.append('_method', 'patch')

Collectives™ on Stack Overflow

axios.patch / axios.put is not working in Vue and Laravel

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related