Vue2 how to create dynamic data field in vue instance for form validation

Question

I'm new to Vue.js and I'm trying to do form validation on a dynamically created form. The input fields are determined via the json object it gets from an ajax call. I've looked around and found a lot of form validation libraries, but all of them seem to need a static data property in the vue instance in order for the validation portion to work. e.g.

...
data() {
  return {
    name: '',
    age: '',
    ...
  }
}
...

but because the fields in my forms depend on the json object, I can't hardcode these values in data. One method I thought of trying was loop through the json object, grab a unique key value (like the field name), pair it with an empty value, and then store that object in a data variable that I pass into the data field in the vue instance. But that's also dependent on each input field having a unique name (what if there are multiple fields that are named "First Name" that are all required?).

Is this the correct approach? Or is there some fundamental concept that I'm missing? Please let me know if I need to provide some more information about this! Thanks.

My set up: main.js (instantiates the vue instance and calls upon App.js, which is a component) --> App.js contains the data field, as well as calls upon all the other components (e.g. input field, radio button, checkbox, etc), depending on which ones are in the json object

tony19 · Accepted Answer · 2022-07-16 05:07:41Z

0

You can try use Vue.set :

onload: function(data) {
    for(var i in data) {
        Vue.set(this, i, data[i]);
    }
}

API Documentation

edited Jul 16, 2022 at 5:07

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 22, 2017 at 18:57

Edgard Leal

2,75829 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue2 how to create dynamic data field in vue instance for form validation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related