How to store the data of a dynamically created and added form in one object?

Question

Vue.js

I have a form that has "Add" and "Remove" buttons. The "Add" button adds another such form, the "Delete" button removes it. Input data must be stored in one object entity. I tried to implement it here , by generating a random name of the property, which will store the object of all the properties of each form.

Answer 1

Input data must be stored in one object entity.

Since you did not motivate such a need in any way, it is not necessary. Data should be stored where it is easier to work with it - these are the elements of the addableFormData array, on the basis of which you create forms. If you create forms based on one property, and store the data for them in another, you will have to synchronize them somehow, manually. Well, no, it's better to make entity computed a property.
Are you really using vue 1? And what do the divs inside the ul do? And this damn entity: you said that it should be one for all - why is it a property of the component that represents the form element? Questions-questions-questions... Rhetorical, yes.
Zaaaaaaaaaaaaaaaaa??! You already have a unique form id - why not use it?
Sounds like what you were aiming for?
UPD. If you throw away the addableFormData array, then yes - it's easier to keep the data in an object the way you originally intended. Like so .