Vee-validate: validate dynamically created forms

[gutisalex]

Versions

• vee-validate: 3.0.4
• vue: 2.6.10

Describe the bug
I use a ValidationObserver to observe several dynamically build forms. Basically I have an email form and have a button to dynamically add more emails. After the user has added some emails and clicks on submit I want the validation validates all created form components but it only does the last one!

Code Example

<ValidationObserver ref="observer" v-slot="{invalid}" tag="form">
    <BuefyForm v-for="email in emails" :key="email.id" :email.sync="email"/>
</ValidationObserver>

Expected behavior
The observer should validate all given forms before submit!

Demo link
https://codesandbox.io/s/veevalidate-components-buefy-dn82h

Desktop:

• OS: macOS Mojave (10.14.6)
• Browser: Chrome
• Version 76

[logaretm]

All your providers have the same name, which when provided without an explict vid will be used as the provider's id. That means that the last provider will overwrite the previous ones.

You should add a vid prop to your component with a unique id for each item so it can be used as the id instead of the name prop.

here is an example:

https://codesandbox.io/s/veevalidate-components-buefy-r6bfu

[gutisalex]

ok but what if I have more than one input?

Edit: Found it out already...
https://codesandbox.io/s/veevalidate-components-buefy-tj2h1