DEV Community

Joney Spark
Joney Spark

Posted on

How to show Array of errors in Vue.js ? Backend Validation with Laravel Help plz ?

Hi, I have some complex data and I want to show the validation error array data in vue file but I can not because I have got some data that has index please share your opinion

vue file

<template> <div> <form enctype="multipart/form-data" @submit.prevent="handleSubmit"> <div v-for="(contact, index) in contacts" :key="index" class="row"> <div class="col col-md-3"> <div class="form-group mb-4"> <label for="personName">Contact Person Name</label> <input id="personName" v-model="contact.name" type="text" class="form-control" /> <small> Want to show here the error ? </small > </div> </div> <!-- Add or Remove button --> <div class="col col-md-12 text-right"> <div class="row ml-4"> <div v-show="index == contacts.length - 1"> <button class="btn btn-warning mb-2 mr-2 btn-rounded" @click.prevent="add" > Add More </button> </div> <div v-show="index || (!index && contacts.length > 1)"> <button class="btn btn-danger mb-2 mr-2 btn-rounded" @click.prevent="remove" > Remove </button> </div> </div> </div> </div> </form> </div> </template> <script> export default { data() { return { contacts: [ { name: "", }, ], errors: [], }; }, methods: { handleSubmit() { let data = new FormData(); data.append("contacts", JSON.stringify(this.contacts)); Request.POST_REQ(data, "/add-institute") .then(() => { alert("success"); }) .catch((err) => { this.errors = err.response.data.errors; }); }, add() { this.contacts.push({ name: "", email: "", phone: "", alternate_phone: "", }); }, remove(index) { this.contacts.splice(index, 1); }, }, }; </script> 
Enter fullscreen mode Exit fullscreen mode

controller file

 public function add_institute(Request $request) { $request['contacts'] = json_decode($request['contacts'], true); $request->validate([ 'contacts.*.name'=> 'unique:institute_contact_people|distinct', ]); ...rest of code of insert return response()->json("Success..."); } 
Enter fullscreen mode Exit fullscreen mode

Getting Response data

errors: { contacts.0.name: ["The contacts.0.name has already been taken.", "The contacts.0.name field has a duplicate value."] 0: "The contacts.0.name has already been taken." contacts.1.name: ["The contacts.1.name has already been taken.", "The contacts.1.name field has a duplicate value."] 0: "The contacts.1.name has already been taken." } 
Enter fullscreen mode Exit fullscreen mode

Top comments (0)