As a newcomer to Vue.js, I'm tackling the challenge of implementing form validation on a dynamically generated form. The input fields are populated based on the JSON object retrieved through an AJAX request. While exploring various form validation libraries, I noticed that most of them require a static data property within the Vue instance for validation to function correctly. For example:
...
data() {
return {
name: '',
age: '',
...
}
}
...
However, since the form fields are contingent on the JSON object, hardcoding these values in the data section is not a viable option. One approach I considered was iterating through the JSON object, extracting a unique key value (like the field name), and pairing it with an empty value. Then, I aimed to store this object in a data variable to pass into the data field in the Vue instance. Yet, this method relies on each input field having a distinct name (considering scenarios where multiple fields have the same name, such as "First Name" and all are mandatory).
Is this strategy on the right track? Could I be overlooking a fundamental concept? Kindly advise if additional information is necessary! Thank you.
My setup: The main.js file instantiates the Vue instance and references App.js, which serves as a component. App.js houses the data field and calls upon various components (e.g., input fields, radio buttons, checkboxes) depending on their presence in the JSON object.