Dynamic form inputs on Vuejs

Question

In my form I need to make a method for dynamically adding form fields to "add new user" and push them to my data array founders: [] . My inputs that needs to be added to form just hidden inside of <div id="new-user"> with display:none . Not sure that it's the right way, but I'm trying to do something like code below. So I need to figure out how correctly display my form fields at exact place as many times as user press on "Add new user" button and push at the same time data.

addFounderGrant() {
        var elem = document.createElement('#new-user'); //This part I need help
        this.step3.foundersGrants.push( {
            email:'',
            first_name:'',
            last_name:'',
            issue_date:'',
            certificate:'',
            share_price:'',
            shares_amount: '',
        } )
    },

I also tried this way, here my display form fields works fine, but data storing was wrong, too complex for me.

addFounder() {
        var counter = 0;
            counter++;
            var newFields = document.getElementById('new-user').cloneNode(true);

            newFields.id = '';
            newFields.style.display = 'block';
            var newField = newFields.childNodes;
            for (var i=0;i<newField.length;i++) {
                var theName = newField[i].name
                if (theName)
                    newField[i].name = theName + counter;
            var insertHere = document.getElementById('writeroot');
            insertHere.parentNode.insertBefore(newFields,insertHere);
        }
        this.step3.foundersGrants.push( {
            email:'',
            first_name:'',
            last_name:'',
            issue_date:'',
            certificate:'',
            share_price:'',
            shares_amount: '',
        } )
    },

Struggling 3rd day with this thing, please tip me what's the easiest way to do it right?

Answer 1

创建一个包含用户详细信息的对象数组，并在添加新用户时通过v-for呈现该对象，将一个对象推入该数组，该对象将自动显示在模板中。