Vee-validate: Cant validate dynamic added input fields

[LarsWith]

I am adding input fields dynamic by clicking on a "+" button.

<input :name="'username' + index" v-validate="'required'" v-model="row.username" required>
<input :name="'username' + index" v-validate="'required'" v-model="row.username" required>
<input :name="'username' + index" v-validate="'required'" v-model="row.username" required>

To make sure that each input gets a unique name I use :name="'username' + index"

But how can I now display the error message?

I have tried <span v-show="errors.has('username' + index)">@{{ errors.first('username') }}</span> but it doesnt work

[brfrth]

As of right now this is not possible properly as far as I can tell. Seems like something that should be added in the future though.

[LarsWith]

@sebastianbarfurth do you know any other vueJS validator plugin that supports this?

[brfrth]

I don't, but I'll try to figure out how to do it with VeeValidate. As far as I can tell the other major validators don't do it either.

[logaretm]

It is supported, your first method call should be the same as your has.

Take a look at this example:

https://jsfiddle.net/logaretm/wcs27wLx/

You should be relying on ids instead of indexes, as indexes are unreliable since you might add a remove button for each input, and you should also have a key attribute on your inputs bound to the id.

[LarsWith]

@logaretm thanks. But why would indexes be unreliable? I already have a remove button and I havent faced any problem yet

[logaretm]

Because when you remove an input, lets say at pos 2, the pos 3 input will just replace it. Because Vue actually reuses form inputs. which might cause issues, those issues may not affect you if all the inputs are identical (same type, same rules) but I recommend avoiding using indexes regardless.