我有一个大型表格，我已分成不同的组件。主要组件或父组件将具有提交按钮，而子组件则具有不同类别的部分。我需要知道的是，当用户单击提交按钮时，如何从子组件的输入字段中获取值，并在将它们全部发送到服务器之前在父组件中进行验证。
这是我想说的代码示例。 main将只渲染其他组件和提交按钮。我不知道我在哪里或如何首先进行现场验证，而不是将其全部提交给服务器。
main.vue
<form @submit.prevent="onSubmit">
<table class="table" style="background: #ffffff">
<tr>
<td id="app1" >
<applicant1></applicant1>
</td>
</tr>
</table>
<table class="table" style="background: #ffffff">
<tr>
<td id="app2" >
<applicant2></applicant2>
</td>
</tr>
</table>
<table class="table" style="background: #ffffff">
<tr>
<td><button
type="submit"
class="btn btn-primary">
Process License Request
</button><!--onClick="stripfields()-->
</td>
<td>
<button
type="button"
class="btn btn-secondary"
@click="resetForm()">
Reset Form
</button>
</td>
</table>
</form>
</div>
</div>
</template>
<script>
import Applicant1 from './applicant1.vue'
import Applicant2 from './applicant2.vue'
export default {
components: {
'applicant1': Applicant1,
'applicant2': Applicant2
},
data () {
return {
}
},
methods: {
resetForm () {
console.log('Reseting the form')
//.....clear all the form values
},
onSubmit (e) {
console.log(e)
//........get values form applicat 1 and 2 components
}
},
}
</script>
<style scoped>
ul {
list-style-type: none;
margin-bottom: 0;
}
@media only screen and (max-width: 600px) {
}
</style>
这是2个额外的组件
applicant1.vue
<template>
<div style="margin: 20px;">
<table class="table">
<tr>
<td colspan="4" class="title">
<b>Applicant 1 Information</b>
</td>
</tr>
<tr>
<td></td>
<td>
<span color="#000080"><b>First</b>
</span>
</td>
<td>
<span color="#000080"><b>Middle</b>
</span>
</td>
<td>
<span color="#000080"><b>Last</b>
</span>
</td>
</tr>
<tr>
<td class="lables">
Name:
</td>
<td colspan="1">
<input type="text" name="applicant1FirstName" v-model="applicant1.FirstName" maxlength="60"
id="firstname">
</td>
<td>
<input type="text" name="applicant1MiddleName" v-model="applicant1.MiddleName" maxlength="60"
id="middlename">
</td>
<td>
<input type="text" name="applicant1LastName" v-model="applicant1.LastName" maxlength="60"
id="lastname">
</td>
</tr>
<tr>
<td class="lables">Street Address:
</td>
<td>
<input type="text" name="applicant1StreetAdd" v-model="applicant1.StreetAdd" maxlength="30" id="streetadd">
</td>
</tr>
<tr>
<td class="lables">
City:
</td>
<td>
<input type="text" name="applicant1City" v-model="applicant1.City" maxlength="20" id="city" >
</td>
</tr>
<tr>
<td class="lables">
State, Zip:
</td>
<td>
<select name = "applicant1[GState]" id="gstate" v-model="applicant1.GState">
<option label="-" value="">-</option>
<option v-for="state in states" v-bind:value="state.Code">{{ state.Code }}</option>
</select>,
<input type="text" name="applicant1Zip" size="9" v-model="applicant1.Zip" maxlength="12" id="zip" >
</tr>
<tr>
<td class="lables">
County Residing:
</td>
<td colspan="3">
<select name = "applicant1County_dropdown" id="county_dropdown" v-model="applicant1.County_dropdown">
<option label="-" value="" disabled>-</option>
<option v-for="county in counties" v-bind:value="county">{{ county }}</option>
</select>
Or
<input type="text" name="applicant1County" v-model="applicant1.County" maxlength="15" id="county" >
</td>
<tr>
</table>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'applicant1',
data () {
return {
applicant1: {
FirstName: '',
MiddleName: '',
LastName: '',
GroomMaName: '',
Title: '',
StreetAdd: '',
City: '',
State: '',
Zip: '',
County_dropdown: '',
County: ''
}
}
}
}
</script>
applicant2.vue
<template>
<div style="margin: 20px;">
<div class="divSpace">
<h4>Applicant 2 nformation</h4>
</div>
<table class="table">
<tr>
<td></td>
<td><span color="#000080" size="2"><b>First</b></span></td>
<td><span color="#000080" size="2"><b>Middle</b></span></td>
<td><span color="#000080" size="2"><b>Last</b></span></td>
</tr>
<tr>
<td class="lables">
Name:
</td>
<td>
<input type="text" name="FirstName" v-model="applicant2.FirstName" maxlength="60"
id="firstname" ></td>
<td>
<input type="text" name="BMiddleName" v-model="applicant2.MiddleName" maxlength="60"
id="middlename"></td>
<td>
<input type="text" name="LastName" v-model="applicant2.LastName" maxlength="60"
id="lastname"></td>
</tr>
<tr>
<td class="lables">
Street Address:
</td>
<td>
<input type="text" name="StreetAdd" v-model="applicant2.StreetAdd" maxlength="30" id="streetadd" >
</td>
</tr>
<tr>
<td class="lables">
City:
</td>
<td>
<input type="text" name="City" v-model="applicant2.City" maxlength="20" id="city"
</td>
</tr>
<tr>
<td class="lables">
State, Zip:
</td>
<td colspan="3">
<select name = "State"
id="bstate"
v-model="applicant2.State">
<option label="-" value="">-</option>
<option v-for="state in states" v-bind:value="state.Code">{{ state.Code }}</option>
</select>,
<input type="text" name="Zip" v-model="applicant2.Zip" size="9" maxlength="12" id="zip" >
</td>
</tr>
<tr>
<td class="lables">
County Residing:
</td>
<td colspan="3">
<select name = "applicant2" id="dropdown" v-model="applicant2.County_dropdown">
<option label="-" value="" disabled>-</option>
<option v-for="county in counties" v-bind:value="county">{{ county }}</option>
</select>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'applicant2',
data: function () {
return {
applicant2: {
FirstName: '',
MiddleName: '',
LastName: '',
BStreetAdd: '',
BCity: '',
BState: '',
BZip: '',
BCounty_dropdown: '',
BCounty: '',
}
}
}
</script>
我仍然是vuejs的新手，请原谅我，如果我没有解释这一切。谢谢