Question

我正在用Vue动态生成HTML表单。有一个新员工按钮，当单击该按钮时，会将新表单及其提交按钮添加到页面。提交按钮将调用一个使表格中的字段为只读的方法。但是，当我单击任何提交按钮时，它将影响页面中的所有表单。我希望每个按钮仅负责其自身的形式。我该如何实现？

这是我的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 });

        }
    }
});

}

Answer 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 });
}

如何处理Vue.js动态生成的多种表单

1 个答案: