How to display errors from array response after validation from laravel to vue.js (based on the index)

Question

I'm trying to display the errors in the correct order (based on the index) from the response I have in laravel api.

Errors displayed on vue using {{ errors }} :

{ "options.cart.0.request": [ "options.cart.0.request es is invalid." ], "options.cart.3.request": [ "options.cart.3.request is invalid." ] }

Function that calls the api - Response Status code that I get is 422 :

        async doOrder () {
            axios.post('api/order', this.user).then( response => {
                this.$store.dispatch('auth/updateUser', { user : response.data })
            }).catch(error => {
                if (error.response.status === 404) {
                    this.$router.push('/404');
                }
                if (error.response.status === 422 ) {
                    this.errors = error.response.data.errors
                }
            });

Laravel Validation :

    public function store(Request $request)
    {
        $input = $this->validate( $request, [
            'options.cart' => 'required|array',
            'options.cart.*.code' => 'required|exists:products,code',
            'options.cart.*.request' => 'required|in:1,2',
        ]);

        return $request; //Testing

    }

Vue v-for :

        <section id="request" v-if="user.options.cart.length > 0">
            <div class="card-body" v-for="(object , index) in user.options.cart" :key="object.product_id">
                <div class="col-6 col-sm-6 col-md-8 text-md-right form-group" style="padding-top: 5px">
                    <select class="custom-select my-1 mr-sm-2" :class="errors ? 'is-invalid' : ''" name="request" required v-model="object.request">
                        <option value="1" :selected="object.request == 1 ">Amostras</option>
                        <option value="2" :selected="object.request == 2 ">Informações / Cotação</option>
                    </select>
                    <div class="invalid-feedback" v-if="errors.errors">Example invalid custom select feedback</div>
                </div>
            </div>
        </section>

Its an array of options. Show the results for each element of the array / object.I want to put the error below the object that has errors. — rocket_moon
– rocket_moon, Commented Jul 11, 2019 at 13:18
Did you find a solution to this question? I'm having the same problem. — Robert Kujawa
– Robert Kujawa, Commented Mar 7, 2020 at 1:12

user10392165 · Accepted Answer · 2019-07-11 11:43:50Z

1

you will need to use validator facades like this

    $validator = \Validator::make(request()->all(), [
        'options.cart' => 'required|array',
        'options.cart.*.code' => 'required|exists:products,code',
        'options.cart.*.request' => 'required|in:1,2',
    ]);

if($validator->fails()){
    return response()->json(['status' => false, 'data' => $validator->errors()]);
}

answered Jul 11, 2019 at 11:43

user10392165

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

1 Comment

rocket_moon Over a year ago

I got the same result: {"status":false,"error":{"options.cart.0.request":["options.cart.0.request is invalid."]}}

Niraj Gautam · Accepted Answer · 2022-09-18 14:50:22Z

0

please follow along,

in your controller

 $request->validate([
        'ClinicName' => 'required|string|min:200',
        'Branches.*.BranchName'=>'required|string|min:200'
    ]);

in your vue3 file, to access the errors which will have keys such as, 'Branches.0.BranchName' then you can access the above error with for loop similar to this

<p v-if="form.errors['Branches.' + counter + '.BranchName']"
   class="mt-2 text-sm text-red-600 dark:text-red-500">
              {{ form.errors["Branches." + counter + ".BranchName"] }}
 </p>

here the counter can be any counter starting from 0.

answered Sep 18, 2022 at 14:50

Niraj Gautam

1777 bronze badges

Collectives™ on Stack Overflow

How to display errors from array response after validation from laravel to vue.js (based on the index)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related