[Vuejs]-Returning Success / Error messages – Laravel & VueJS

2👍

Validate form and return error from laravel controller as

private function validateForm($advsearch){
    $validator = Validator::make($advsearch, [
        'fname' => 'required',
    ]);
    return $validator;
}

public function submitForm(Request $request){
    $validator = $this->validateForm($request->all());
    if ($validator->fails()) {
        return response()->json(['isvalid'=>false,'errors'=>$validator->messages()]);
    }
    .....
    .....
}

And display in vue by binding

<div>{{errors.fname?errors.fname[0]:''}}</div>

if you already bind errors in vue data

   data() {
        return {
            errors:[],
            image: ''
        }
   },

And update it after submit and if you get any error

  axios.post('/api/upload',{image: this.image})
     .then(response => {
         if(response.isValid == false){
            this.errors = response.errors;
         }
  });

in your update you can check errors exist or not by if(response.body.errors !== undefined){

0👍

response.data.isValid use this instead of response.isValid in uppercase

Leave a comment