Form with dynamic/custom fields inside loop

[dennismetz]

What happened?

I have a form that I would like to send. Within this form, I generate new fields depending on the number of data records. If I now edit one of these fields, all data records are edited and changed.
The validation does not work either and only the last field is validated.
However, only the visible fields are changed. The ID, for example, remains the same as long as it is not displayed in any input.

If I now omit the “form” around the fields, everything works.

Github Link to Repo: https://github.com/dennismetz/veevalidate-bug

Reproduction steps

1. Checkout the project and run it (localhost port 3333)
2. Wait until the data has been loaded
3. Change an input field - no matter which one
4. All fields are changed

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

-

Demo link

https://codesandbox.io/p/github/dennismetz/veevalidate-bug/

Code of Conduct

• I agree to follow this project's Code of Conduct

[logaretm]

The field has no idea it is a part of a loop. You should ensure that each field name is unique either by using indexes as part of the name. Alternatively consider using Field Arrays.

[dennismetz]

Hi @logaretm, unfortunately, I have to ask again.

I have now tested a few things, but have not come to any conclusions.
Even if I add an ID to the “name” attribute in the input, it doesn't work.
With field arrays, I have to use an initial-values in the form, but I can't do that because the data is loaded later. I do know which fields will arrive, but these fields are not displayed.

Could you please help me here, I'm getting desperate about the whole thing