How to display laravel validation errors in vuejs

There are several resources that address this topic but I want to just share my solution for a situation where you have to display laravel validation errors in vuejs component not just with the traditional loop but, this time, a nested loop. You should understand better by the time we are done.

Note: I will not go into details on how to write an API in laravel or build a vuejs app frontend. I will just discuss this topic with code snippets that you are probably familiar with if you are used to writing laravel and Vuejs

Lets assume that we return error responses from our backend like so

  public function register(Request $request)
    {

        $validator = Validator::make($request->all(), [
            'name' => 'required|string',
            'email' => 'required|email|unique:users',
            'gender' => 'required',
        ]);

        if ($validator->fails()) {    
            return response()->json($validator->messages(), 400);
        }
}

Lets say the user have some empty fields from the frontend, so in our browser network tab, the laravel validation error responses from our backend looks like this:

Now, in our Vuejs Component; We have a state in the data object where we assign the response errors to.

export default {

  data() {
    return{

    notifmsg: ''
         }
    },

While in our catch() function we are assigning laravel validation response like so:

.then(()=> {
// do some magic stuff here
    }).catch(e => {
       this.notifmsg = e.response.data
})

Now here is the thing: If you go by the traditional way of looping through the response we got from our backend, like so:....

<div v-for="(errorArray, index) in notifmsg" :key="index">
<span class="text-danger">{{ errorArray}} </span>
</div>

...the output on the FE will look like this:

Yeaaah...this is not what we want right ? Yes.

The reason is because validation error response from our laravel app being returned as an array of objects. So, to solve this we'll have to perform a nested loop like so:

<div v-for="(errorArray, idx) in notifmsg" :key="idx">
    <div v-for="(allErrors, idx) in errorArray" :key="idx">
        <span class="text-danger">{{ allErrors}} </span>
    </div>
</div>

The output looks like this :

Boom...! And thats what we acctually want to achieve. Thanks for reading...

Please drop your contributions in the comment section if you have any...