VueJS and laravel validation array

Question

validation from Laravel to VueJS.

I need to show the right error messages to the right input field. Any one have an idea?

form.vue :

<tr v-for="(item, index) in form.items">
 <td>
 <input type="text" v-model="item.name" class="form-control">
  <small class="text-danger" v-if="errors.name">
  {{errors.name[0]}}</small>
  </td>
   <input type="text" v-model="item.age" class="form-control">
  <small class="text-danger" v-if="errors.age">
  {{errors.age[0]}}</small>
  </td>
  </tr>

Controller :

$this->validate($request, [
        'items.*.name' => 'required',
        'items.*.age' => 'required',
    ]);

I got this in my vue devtools

it seems that errors is ne array and not name. {{errors[0]}} start with a dump of the error onutput and analyze the actual structure or read the offical docs for it? — Frnak
– Frnak, Commented Apr 27, 2017 at 10:37

Haiko · Accepted Answer · 2017-04-27 13:58:19Z

1

It looks like you have to itterate through your errors object. Within error your key is "items.0.name", so probably you have to use {{ errors['items.0.name'] }}. But I think you would have to change your laravel error validation.

answered Apr 27, 2017 at 13:58

Haiko

1431 silver badge6 bronze badges

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

Comments

Md. Azahar Alam · Accepted Answer · 2022-09-22 19:15:33Z

is an example of two dimensional arrays

validacion.revision[0].vehiculo_revision_all

right way

validacion['revision.'+index+'.vehiculo_revision_all']

validations in the controller

$rules =[
  'revision.*.vehiculo_revision_all.*.cantidad' => 'required',
  'revision.*.vehiculo_revision_all.*.estado' => 'required'
];

array output data

revision.2.vehiculo_revision_all.0.cantidad: ["El campo revision.2.vehiculo_revision_all.0.cantidad es obligatorio."]
revision.2.vehiculo_revision_all.0.estado: ["El campo revision.2.vehiculo_revision_all.0.estado es obligatorio."]
revision.2.vehiculo_revision_all.1.cantidad: ["El campo revision.2.vehiculo_revision_all.1.cantidad es obligatorio."]



<tr v-for="(revision, index) in form.items" v-bind:key="data.id">
     <tr v-for="(data, ins) in form.items" v-bind:key="data.id">
       <span v-if="validacion['revision.'+index+'.vehiculo_revision_all.'+ins+'.estado'] ">
                {{ validacion['revision.'+index+'.vehiculo_revision_all.'+ins+'.estado'] }}
        </span>
     </tr>
</tr>

Ralph519 · Accepted Answer · 2018-04-18 06:58:20Z

I display my error messages using sweet alert. I catch it first on my axios post.

     createAdminstrator(name, username, password, confirmpassword, superadmin) {
        const t = this;

        axios.post('/administrators', {name: name, username: username, password: password, confirmpassword: confirmpassword, superadmin: superadmin})
            .then(({data}) => {
                t.administrators.unshift(data);
                t.error = '';
            })
            .catch(error => {
                if (error.response.data.errors.username) {
                  swal(error.response.data.errors.username[0], "Error", "error");
                } else if (error.response.data.errors.confirmpassword) {
                  swal(error.response.data.errors.confirmpassword[0], "Error", "error");
                } else if (error.response.data.errors.password) {
                  swal(error.response.data.errors.password[0], "Error", "error");
                }
              });
    }

Collectives™ on Stack Overflow

VueJS and laravel validation array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related