Javascript 如何处理使用Vue.js动态生成的多个表单_Javascript_Html_Forms_Vue.js_Vuejs2

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

javascript html forms vue.js vuejs2

Javascript 如何处理使用Vue.js动态生成的多个表单,javascript,html,forms,vue.js,vuejs2,Javascript,Html,Forms,Vue.js,Vuejs2,我正在使用Vue动态生成HTML表单。有一个New Employee按钮，单击该按钮时，会将一个新表单及其submit按钮附加到页面。submit按钮调用一个使表单中的字段为只读的方法。但是，当我单击任何提交按钮时，它会影响页面中的所有表单。我希望每个按钮只负责它自己的表单。我如何做到这一点这是我的HTML页面：  <!DOCTYPE html> <html> <head> <title>For

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

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

将employee对象传递给

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


....
...                
数据：{
雇员：[
{
名称：“”，
作业：“”，
关于：''，
只读：false，
}
]
},
addNewEmployeeForm（）{
这个，员工，推({
名称：“”，
作业：“”，
关于：''，
只读：false，
})
},
processForm:功能（员工）{
employee.readonly=！employee.readonly；
log（{name:employee.name，job:employee.job，about:employee.about}）；
}

谢谢您的回复。我试过了，但不起作用。在任何表单上单击“提交”后，表单不会变为只读。我看到我在

readOnly

中输入了大写字母，你能确认它是像html中的

readOnly

那样写的吗？我修复了大写字母。我还从employees数组中删除了

readonly

，而是将其直接放在数据对象中。我对addNewEmployeeForm（）方法做了类似的事情。这是一种工作方式，但方式出乎意料。单击“提交”按钮后，字段不会被禁用，但如果我将光标移动到任何字段并键入某个内容，它会突然被禁用。您需要在employee数组中使用readonly，因为您希望使其成为每个员工的只读，而不是一次全部

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