title: vue large form with multiple components
body: <p>I am having a large form that I have split into different components. The main or parent component will have the submit button while the child components are section off the different categories. What I need to know is when the user clicks the submit button, how can I grab the values from the input fields of the child components and have them verified in the parent component before sending it all to the server.</p>
  
  <p>Here is a code example of what I am trying to say. The main will just render the other components and the submit button. I am not sure where or how I could do the field validation first and than submit it all to the server.</p>
  
  <p>main.vue</p>
  
  <pre><code>                &lt;form @submit.prevent="onSubmit"&gt;
                  &lt;table class="table" style="background: #ffffff"&gt;
                  &lt;tr&gt;
                      &lt;td id="app1" &gt;
                          &lt;applicant1&gt;&lt;/applicant1&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;/table&gt;
                  &lt;table class="table" style="background: #ffffff"&gt;
                      &lt;tr&gt;
                          &lt;td id="app2" &gt;
                              &lt;applicant2&gt;&lt;/applicant2&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
                  &lt;table class="table" style="background: #ffffff"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;button
                                  type="submit"
                                  class="btn btn-primary"&gt;
                              Process License Request
                          &lt;/button&gt;&lt;!--onClick="stripfields()--&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;button
                                  type="button"
                                  class="btn btn-secondary"
                                  @click="resetForm()"&gt;
                              Reset Form
                          &lt;/button&gt;
                          &lt;/td&gt;
                  &lt;/table&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  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
      }
    },
  
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
      ul {
          list-style-type: none;
          margin-bottom: 0;
      }
      @media only screen and (max-width: 600px) {
  
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>This are the 2 extra components</p>
  
  <p>applicant1.vue</p>
  
  <pre><code>    &lt;template&gt;
      &lt;div style="margin: 20px;"&gt;
          &lt;table class="table"&gt;
              &lt;tr&gt;
                  &lt;td colspan="4" class="title"&gt;
                      &lt;b&gt;Applicant 1  Information&lt;/b&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;span color="#000080"&gt;&lt;b&gt;First&lt;/b&gt;
                      &lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;span color="#000080"&gt;&lt;b&gt;Middle&lt;/b&gt;
                      &lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;span color="#000080"&gt;&lt;b&gt;Last&lt;/b&gt;
                      &lt;/span&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="lables"&gt;
                      Name:
                  &lt;/td&gt;
                  &lt;td colspan="1"&gt;
                      &lt;input type="text" name="applicant1FirstName" v-model="applicant1.FirstName" maxlength="60"
                      id="firstname"&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" name="applicant1MiddleName" v-model="applicant1.MiddleName" maxlength="60"
                      id="middlename"&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" name="applicant1LastName" v-model="applicant1.LastName" maxlength="60"
                      id="lastname"&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="lables"&gt;Street Address:
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" name="applicant1StreetAdd" v-model="applicant1.StreetAdd" maxlength="30" id="streetadd"&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="lables"&gt;
                      City:
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" name="applicant1City" v-model="applicant1.City" maxlength="20" id="city" &gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="lables"&gt;
                      State, Zip:
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;select name = "applicant1[GState]" id="gstate" v-model="applicant1.GState"&gt;
                          &lt;option label="-" value=""&gt;-&lt;/option&gt;
                          &lt;option v-for="state in states" v-bind:value="state.Code"&gt;{{ state.Code }}&lt;/option&gt;
                      &lt;/select&gt;,
                      &lt;input type="text" name="applicant1Zip" size="9" v-model="applicant1.Zip" maxlength="12" id="zip" &gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="lables"&gt;
                      County Residing:
                  &lt;/td&gt;
  
                  &lt;td colspan="3"&gt;
                      &lt;select name = "applicant1County_dropdown" id="county_dropdown" v-model="applicant1.County_dropdown"&gt;
                  &lt;option label="-" value="" disabled&gt;-&lt;/option&gt;
                  &lt;option v-for="county in counties" v-bind:value="county"&gt;{{ county }}&lt;/option&gt;
                  &lt;/select&gt;
                   &amp;nbsp;&amp;nbsp; Or &amp;nbsp;&amp;nbsp;
                      &lt;input type="text" name="applicant1County" v-model="applicant1.County" maxlength="15" id="county" &gt;
                  &lt;/td&gt;
              &lt;tr&gt;
      &lt;/table&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from 'axios'
  
  export default {
    name: 'applicant1',
    data () {
      return {
        applicant1: {
          FirstName: '',
          MiddleName: '',
          LastName: '',
          GroomMaName: '',
          Title: '',
          StreetAdd: '',
          City: '',
          State: '',
          Zip: '',
          County_dropdown: '',
          County: ''
        }
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>applicant2.vue</p>
  
  <pre><code>    &lt;template&gt;
      &lt;div style="margin: 20px;"&gt;
          &lt;div class="divSpace"&gt;
              &lt;h4&gt;Applicant 2 nformation&lt;/h4&gt;
          &lt;/div&gt;
          &lt;table class="table"&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span color="#000080" size="2"&gt;&lt;b&gt;First&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span color="#000080" size="2"&gt;&lt;b&gt;Middle&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span color="#000080" size="2"&gt;&lt;b&gt;Last&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
             &lt;tr&gt;
                  &lt;td class="lables"&gt;
                      Name:
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" name="FirstName" v-model="applicant2.FirstName" maxlength="60"
                             id="firstname" &gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" name="BMiddleName" v-model="applicant2.MiddleName" maxlength="60"
                             id="middlename"&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" name="LastName" v-model="applicant2.LastName" maxlength="60"
                             id="lastname"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="lables"&gt;
                      Street Address:
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" name="StreetAdd" v-model="applicant2.StreetAdd" maxlength="30" id="streetadd" &gt;
                  &lt;/td&gt;
  
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="lables"&gt;
                      City:
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" name="City" v-model="applicant2.City" maxlength="20" id="city" 
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="lables"&gt;
                      State, Zip:
                  &lt;/td&gt;
                  &lt;td colspan="3"&gt;
                      &lt;select name = "State"
                              id="bstate"
                              v-model="applicant2.State"&gt;
                          &lt;option label="-" value=""&gt;-&lt;/option&gt;
                          &lt;option v-for="state in states" v-bind:value="state.Code"&gt;{{ state.Code }}&lt;/option&gt;
                      &lt;/select&gt;,
                      &lt;input type="text" name="Zip" v-model="applicant2.Zip" size="9" maxlength="12" id="zip" &gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="lables"&gt;
                      County Residing:
                  &lt;/td&gt;
                  &lt;td colspan="3"&gt;
                      &lt;select name = "applicant2" id="dropdown" v-model="applicant2.County_dropdown"&gt;
                          &lt;option label="-" value="" disabled&gt;-&lt;/option&gt;
                          &lt;option v-for="county in counties" v-bind:value="county"&gt;{{ county }}&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'applicant2',
    data: function () {
      return {
        applicant2: {
          FirstName: '',
          MiddleName: '',
          LastName: '',
          BStreetAdd: '',
          BCity: '',
          BState: '',
          BZip: '',
          BCounty_dropdown: '',
          BCounty: '',
        }
      }
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I am still new to vuejs so forgive me if I am not explaining this all to well. Thank you </p>