gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 01:32:29 26 4
gpt4 key购买 nike

我正在使用 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 });

}
}
});

}

最佳答案

将您的员工对象传递给 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 });
}

关于javascript - 如何处理使用 Vue.js 动态生成的多个表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51227429/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com