Note: This solution is applicable for Vue 2.X
I am currently working on a unique Vue.js component that has the ability to generate "custom" forms.
This component essentially functions as a standalone form with multiple input fields. Users have the option to add questions, specify input types, and more within this dynamic form. All the data entered is then saved in an array structure, representing a complete form.
Looking ahead, this array of questions can be processed and utilized to display a fully functional form. This empowers users to construct their own forms without needing to hardcode them.
The issue at hand:
As previously mentioned, I intend to save all the data in an array format consisting of individual question objects. For instance, [ { 'question_name': "How are you", 'input_type': "text" }, ... ] and so forth.
However, because this form does not act as a single input field but rather comprises multiple smaller inputs, utilizing v-model on the form component directly becomes challenging.
Hence, there's no straightforward method to ensure that modifications made to the entire form data reflect in the parent component just like how changes in input fields linked with a v-model variable respond reactively.
For example, in my Parent.vue file, I would ideally wish for something like this:
<CustomFormComponent v-model="formData" /> # where formData represents the array mentioned earlier
allowing seamless communication between the parent and the form component, ensuring reactivity when formData undergoes alterations.
A viable approach, albeit not perfect:
One plausible solution involves implementing setter and getter methods within my custom form component. When data submission is required, the getter function can be invoked, while the setter can facilitate adding predefined questions whenever necessary.
If anyone has insights on whether achieving my desired functionality is feasible, your expertise would be greatly appreciated.