Question

在我的表单中，我需要一种方法来动态添加表单字段以“添加新用户”并将其推送到我的数据数组founders: []中。我需要添加的输入内容仅用<div id="new-user">隐藏在display:none内部。不确定这是正确的方法，但我正在尝试执行以下代码。因此，我需要弄清楚如何正确地在用户按“添加新用户”按钮并同时按数据的同时在正确的位置正确显示我的表单域。

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: '',
        } )
    },

我也尝试过这种方式，在这里我的显示表单字段工作正常，但是数据存储错误，对我来说太复杂了。

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: '',
        } )
    },

在这件事上挣扎的第三天，请给我提示最简单的方法是正确的吗？

Answer 1

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

Vuejs上的动态表单输入

1 个答案: