如何处理使用 Vue.js 动态生成的多个表单答案

【问题标题】：How do I process multiple forms generated dynamically with Vue.js如何处理使用 Vue.js 动态生成的多个表单
【发布时间】：2018-12-16 01:38:16
【问题描述】：

我正在使用 Vue 动态生成 HTML 表单。有一个 New Employee 按钮，当单击该按钮时，会在页面上附加一个新表单及其提交按钮。提交按钮调用一个使表单中的字段只读的方法。但是，当我单击任何提交按钮时，它会影响页面中的所有表单。我希望每个按钮只负责它自己的形式。我如何做到这一点？

这是我的 HTML 页面：

<!-- Index.html -->
<!DOCTYPE html>
<html>
<head>

<title>Form</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous">

</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"> 
</script>
<script src="main.js"></script>
</head>
<body>


<div class="container" id="app">
 <button class="btn btn-success" style="margin-bottom: 15px; margin-top: 15px;"
 @click="addNewEmployeeForm"
>
    New Employee
 </button>

 <div class="panel panel-default" style="margin-bottom: 13px;">
    <div class="panel-body" v-for="(employee, index) in employees">

        <span class="pull-right" style="cursor: pointer;" @click="deleteEmployeeForm(index)">X</span>

        <h4>Add Employee (index: {{ index }} )</h4>

        <div class="employee-form">

            <form id="e-form" @submit.prevent="processForm">
                <div class="form-group">
                    <label for="inputName">Name</label>
                    <input type="text" class="form-control" placeholder="Name" v-model="employee.name" :readonly="readonly == 1 ? true : false">
                </div>
                <div class="form-group">
                    <label for="inputJob">Job</label>
                    <input type="text" class="form-control" placeholder="Job" v-model="employee.job" :readonly="readonly == 1 ? true : false">
                </div>
                <div class="form-group">
                    <label for="inputAbout">About</label>
                    <textarea class="form-control" cols="30" rows="10" placeholder="About" v-model="employee.about" :readonly="readonly == 1 ? true : false"></textarea>
                </div>

                <button class="btn btn-default">Submit</button>
            </form>

        </div>


    </div>
</div>
</div>

</body>
</html>

这是我的 JS 文件：

// Main.js
window.onload = function () {

var app = new Vue({
    el: '#app',
    data: {

        readonly: 0,
        employees: [
        {
            name: '',
            job: '',
            about: ''
        }
        ]
    },
    methods: {
        addNewEmployeeForm() {
            this.employees.push({
                name: '',
                job: '',
                about: ''
            })
        },
        deleteEmployeeForm( index ) {
            this.employees.splice(index, 1);
        },
        processForm: function() {
            this.readonly = (this.readonly + 1) % 2;
            //console.log({ name: this.employees[0].name, job: this.employees[0].job, about: this.employees[0].about });

        }
    }
});

}

【问题讨论】：

标签： javascript html forms vue.js vuejs2

【解决方案1】：

将您的员工对象传递给processForm 方法，并为每个员工存储只读标志：

<form id="e-form" @submit.prevent="processForm(employee)">
....
<input type="text" class="form-control" placeholder="Name" v-model="employee.name" :readonly="employee.readOnly == 1 ? true : false">

...                


data: {
    employees: [
    {
        name: '',
        job: '',
        about: '',
        readOnly: false,
    }
    ]
},
addNewEmployeeForm() {
    this.employees.push({
        name: '',
        job: '',
        about: '',
        readOnly: false,
    })
},
processForm: function(employee) {
    employee.readonly = !employee.readonly;
    console.log({ name: employee.name, job: employee.job, about: employee.about });
}

【讨论】：

感谢您的回复。我试过这个，但它不工作。在任何表单上单击提交后，表单不会变为只读
我看到我在readOnly 中写了一个大写错误，你能确认它在html 中是像readOnly 那样写的吗？
我修正了大写。我还从employees 数组中删除了readonly，而是将其直接放在数据对象中。我用 addNewEmployeeForm() 方法做了类似的事情。它有点工作，但以一种意想不到的方式。单击提交按钮后，这些字段不会被禁用，但是如果我将光标移动到任何字段并输入一些内容，它就会突然被禁用。
您需要员工数组中的只读，因为您想让它对每个员工都是只读的，而不是一次性所有