javascript - 处理动态表以在 Vuejs 框架中添加和删除行，下面是我的表
问题描述
<div class="card-headerfrm" style="margin:0 0px 15px -20px; overflow: auto">
<form method="post" id="form2" class="form-horizontal" v-on:submit.prevent="submitForm">
<table class="table-hover tbl datatables" style="width:100%;">
<head>
<tr class="text-primary table-bordered">
<td class="text-center tableheader"><b>Name</b></td>
<td class="text-center tableheader"><b>Email</b></td>
<td class="text-center tableheader"><b>Contact No</b></td>
<td class="text-center tableheader"><b>Type</b></td>
<td class="text-center tableheader"><b>Person Type</b></td>
<td class="text-center tableheader"><b>Remove</b></td>
</tr>
</thead>
<tbody v-for="(input,index) in inputs" :key="index">
{{input}}
<tr>
<td>
<b-form-fieldset>
<b-input-group>
<b-form-input
type="text"
placeholder="Enter Registered Name"
v-model="input.name"
:name="'name'+index"
v-validate="{required:true, max: 30, regex: /^[a-z\d\-_\s]+$/i}"
v-bind:class="{'form-control': true, 'error': errors.has('name'+index) }">
</b-form-input>
</b-input-group>
<span v-show="errors.has('name'+index)" class="text-danger">{{ errors.first('name'+index) }}</span>
</b-form-fieldset>
</td>
<td>
<b-form-fieldset>
<b-input-group>
<b-form-input
type="text"
placeholder="Enter Email"
v-model="input.email"
:name="'email'+index"
v-validate="{required:true, max: 30, regex: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/}"
v-bind:class="{'form-control': true, 'error': errors.has('email'+index) }">
</b-form-input>
</b-input-group>
<span v-show="errors.has('email'+index)" class="text-danger">{{ errors.first('email'+index) }}</span>
</b-form-fieldset>
</td>
<td>
<b-form-fieldset>
<b-input-group>
<b-form-input
type="text"
placeholder="Enter Contact No"
v-model="input.contactno"
:name="'contactno'+index"
v-validate="{required:true, regex: /^(0|[+91]{3})?[7-9][0-9]{9}$/}"
v-bind:class="{'form-control': true, 'error': errors.has('contactno'+index) }">
</b-form-input>
</b-input-group>
<span v-show="errors.has('contactno'+index)" class="text-danger">{{ errors.first('contactno'+index) }}</span>
</b-form-fieldset>
</td>
<td>
<b-form-fieldset>
<b-input-group>
<basic-select
:options="typeOption"
:selected-option="selectedType.objectArray[index]"
v-model="input.type"
:name="'type'+index"
placeholder="Select Type"
@select="typeFunc"
v-validate="{required:true}"
v-bind:class="{'form-control': true, 'error': errors.has('type'+index)}">
</basic-select>
</b-input-group>
</b-form-fieldset>
</td>
<td>
<b-form-fieldset>
<b-input-group>
<basic-select
:options="personTypeOption"
:selected-option="selectedPersonType.objectArray[index]"
v-model="input.persontype"
:name="'persontype'+index"
placeholder="Person Type"
@select="personTypeFunc"
v-validate="{required: true}"
v-bind:class="{'form-control': true, 'error': errors.has('persontype'+index)}">
</basic-select>
</b-input-group>
</b-form-fieldset>
</td>
<td class="text-center"><h4><i class="fa fa-minus-circle" @click="removeRow(index)"></i></h4></td>
</tr>
</tbody>
提交
export default {
name:'',
components:{VueElementLoading, BasicSelect},
data(){
return {
selectedType:{ objectArray:[] },
selectedPersonType:{ objectArray:[] },
typeOption:[{
value:1,
text: "Operation"
},
{
value:2,
text: "Technology"
},
{
value:3,
text: "Finance And Legal"
}],
personTypeOption:[{
value: 1,
text: "Xpressbees"
},
{
value: 2,
text: "Client"
}],
inputs:[],
}
},
created: function(){
},
mounted(){
},
methods:{
typeFunc(cls){
this.selectedType.objectArray.push(cls)
},
personTypeFunc(cls){
this.selectedPersonType.object.push(cls)
},
openList(){
if(this.inputs.length === 0){
this.showList = true
this.inputs.push({
name:'',
email:'',
contactno:'',
type:'',
persontype:''
});
}else {
this.addInput()
}
},
addInput() {
this.inputs.push({
name:'',
email:'',
contactno:'',
type:'',
persontype:''
});
},
AddNewFunction() {
this.showList = true
this.inputs = [];
if (this.inputs.length == 0) {
this.addInput();
}
},
onSubmit: function(event){
this.$validator.validateAll()
.then(res =>{
if (res) {
this.showList = true
this.getAllClientsDetails()
}else {
return false
}
}).catch(err =>{
console.log("Error Details", err);
})
},
submitForm: function(event){
this.$validator.validateAll()
.then(res =>{
if (res) {
this.SaveSpockDetails()
}else {
return false
}
}).catch(err =>{
console.log("Error Details", err);
})
}
}
}
所以我在 javascript 框架 (Vuejs) 中编写代码，用于从表中动态添加和删除行。我希望用户首先填写第一个打开的行（行），然后单击“添加”按钮，然后该行进行验证检查。如果验证结果为真，则打开第二行，否则显示错误。为了验证字段，我正在使用this.$validator.validateAll()验证提交按钮上的所有字段的功能。我在表中有 3 个文本字段和 2 个选择字段，1）姓名 2）电子邮件 3）联系电话 4）类型（选择）5）人员类型（选择）
其中 3 个输入文本字段工作正常，但在选择字段中我收到验证错误它显示验证错误，即使从下拉框中选择任何值也是如此。
解决方案
请查看此代码，它可能会有所帮助
<?php
if(isset($_POST['submit'])){
$field_Values_array = $_POST['field_name'];
$pass_array = $_POST['class'];
$sg = "";
$len1 = count($field_Values_array);
$x=0;
while($x<$len1){
$sg = $sg."Book - ".$field_Values_array[$x]." Set - ".implode(", ",$pass_array[$x])."<br>";
$x++;
}
echo $sg;
print '<pre>' ; print_r($field_Values_array); print '</pre>';
print '<pre>' ; print_r($pass_array); print '</pre>';
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<?php
$index = 0;
?>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var index = parseInt('<?php echo $index; ?>');
$(document).ready(function(){
var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div><select id="a1" name="field_name[indexed]"><option selected disabled> </option><option>महात्मा गांधी</option><option>बिल्ली</option><option>घोड़ा</option><option>नारियल</option><option>केरल</option><option>चावल</option><option>महाराष्ट्र</option><option>महाबली</option><option>रमेश</option><option>दिल्ली</option><option>किताब </option><option>कछुआ</option></select> <input type="checkbox" name="class[indexed][]" value="A" />A <input type="checkbox" name="class[indexed][]" value="B" />B <input type="checkbox" name="class[indexed][]" value="C" />C <input type="checkbox" name="class[indexed][]" value="1" />1 <input type="checkbox" name="class[indexed][]" value="2" />2 <input type="checkbox" name="class[indexed][]" value="3" />3 <input type="checkbox" name="class[indexed][]" value="4" />4 <input type="checkbox" name="class[indexed][]" value="5" />5 <input type="checkbox" name="class[indexed][]" value="6" />6 <input type="checkbox" name="class[indexed][]" value="7" />7 <input type="checkbox" name="class[indexed][]" value="8" />8 <a href="javascript:void(0);" class="remove_button"><img src="remove.png"/></a></div>'; //New input field html
var x = 1; //Initial field counter is 1
//Once add button is clicked
$(addButton).click(function(){
//Check maximum number of input fields
index++;
newHTML = fieldHTML.replace(/indexed/g, index);
if(x < maxField){
x++; //Increment field counter
$(wrapper).append(newHTML); //Add field html
}
});
//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e){
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
window.onload = function(e){
$('#a1').append("<option selected disabled></option><option>महात्मा गांधी</option><option>बिल्ली</option><option>घोड़ा</option><option>नारियल</option><option>केरल</option><option>चावल</option><option>महाराष्ट्र</option><option>महाबली</option><option>रमेश</option><option>दिल्ली</option><option>किताब </option><option>कछुआ</option>");
}
</script>
</head>
<body>
<div class="container">
<form action="index.php" method="post">
<div class="field_wrapper">
<div>
<input type="text" readonly value="Book Name"/>
<input type="text" readonly value="Book Set"/>
</div>
<div>
<select id="a1" name="field_name[<?php echo $index; ?>]"></select>
<!--<input type="text" name="field_name[<?php echo $index; ?>]" value=""/>-->
<input type="checkbox" name="class[<?php echo $index; ?>][]" value="A" />A
<input type="checkbox" name="class[<?php echo $index; ?>][]" value="B" />B
<input type="checkbox" name="class[<?php echo $index; ?>][]" value="C" />C
<input type="checkbox" name="class[<?php echo $index; ?>][]" value="1" />1
<input type="checkbox" name="class[<?php echo $index; ?>][]" value="2" />2
<input type="checkbox" name="class[<?php echo $index; ?>][]" value="3" />3
<input type="checkbox" name="class[<?php echo $index; ?>][]" value="4" />4
<input type="checkbox" name="class[<?php echo $index; ?>][]" value="5" />5
<input type="checkbox" name="class[<?php echo $index; ?>][]" value="6" />6
<input type="checkbox" name="class[<?php echo $index; ?>][]" value="7" />7
<input type="checkbox" name="class[<?php echo $index; ?>][]" value="8" />8
<a href="javascript:void(0);" class="add_button" title="Add field"><img src="add.png"/></a>
</div>
</div><br><input type="submit" name="submit" value="Submit">
</form>
</div>
</body>
</html>
推荐阅读
- javascript - ReactJS - 当弹出按钮被按下并进入错误页面时系统重新呈现（我没有给出任何命令来发生这种情况）
- c++ - socket() 返回极大的整数值
- c# - 如何在 vs-community 中更改我的代码而不重新启动我的应用程序？
- node.js - Swagger 无法解析 YAML：“SyntaxError: Unexpected token :”
- xamarin - 跨平台应用活跃下载分析
- html - 即使向下滚动，如何使html，body覆盖全屏
- python - Cuda 错误：触发了设备端断言 - 仅在一定数量的批次之后
- javascript - 为什么 ReactJS 上的布尔玛日历不起作用？
- javascript - 寻找 Highmaps 的默认 yAxis 选项以便能够从代码中添加它
- c# - 时间：2019-01-01 标签：c#linqsort by field in object based on variable