search

logaretm / vee-validate

✅ Painless Vue forms
https://vee-validate.logaretm.com/v4
MIT License
10.79k stars 1.26k forks source link

Form with dynamic/custom fields inside loop #4861

Closed dennismetz closed 3 days ago

dennismetz commented 1 month ago

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

grafik grafik

Version

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

What browsers are you seeing the problem on?

Relevant log output

-

Demo link

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

Code of Conduct

logaretm commented 3 days ago

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 commented 21 hours ago

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