parent-child validation - Event bus

address.vue

<template>
    <div class="Address">
        <div class="columns">
            <div class="column">
                <b-field label="AddressLine1*" :type="errors.has('Address') ? 'is-danger': ''" 
                                :message="errors.has('Address') ? errors.first('Address'):''">                       
                    <b-input name="Address" v-model="address.line1" v-validate="'required'"></b-input> 
                </b-field>
            </div>
            <div class="column"> 
                <b-field label="AddressLine2">
                    <b-input v-model="address.line2"></b-input>
                </b-field>
            </div>
        </div>
        <div class="columns">
            <div class="column">
                <b-field label="City*" :type="errors.has('City') ? 'is-danger': ''" 
                                :message="errors.has('City') ? errors.first('City'):''">
                    <b-input name="City" v-model="address.city" v-validate="'required'"></b-input>
                </b-field>
            </div>
            <div class="column">
                <b-field label="State*" :type="errors.has('State') ? 'is-danger': ''" 
                                :message="errors.has('State') ? errors.first('State'):''">
                    <b-select name="State" v-model="address.state" v-validate="'required'"> 
                        <option v-for= "state in stateRefTable" :value="state.referenceCode">{{state.referenceCodeDesc}}</option> 
                    </b-select>
                </b-field>
            </div>
            <div class="column">
                <b-field label="Zip*" :type="errors.has('Zip') ? 'is-danger': ''" 
                                :message="errors.has('Zip') ? errors.first('Zip'):''">
                    <b-input name="Zip" v-model="address.zip" v-validate="'required'"></b-input>
                </b-field>
            </div>
        </div>
    </div>
</template>

<script>
import {HTTP} from '@/api/http-common'
import bus from '@/bus'
export default {
  name: "Address",
  props: {
      address: Object
  },
  data () {
      return {
          stateRefTable: []
      }
  },
    created(){ 
        this.address = this.inputAddress,
        HTTP.get(`/getRefTable/TSTATE`)
        .then(response=> {        
           this.stateRefTable = response.data;
        }).catch (e=>{
            this.err.push(e)
        })
        bus.$on('validate-address', () => {
            this.$validator.validateAll().then(result => {
                if(!result) {
                    bus.$emit('validated', this.$validator.errors)
                }
            })
        })
    }
}
</script>

home.vue

<template>
  <section>
    <div class="columns">
      <div class="column is-10">
        <div class="box">
            <b-tabs type="is-toggle" expanded v-model="activeTab">
                <b-tab-item label="Title">
                  <app-title :title="title"></app-title>
                </b-tab-item>
                <b-tab-item label="Registration">
                    <app-registration :registration="registration"></app-registration>
                </b-tab-item>
            </b-tabs>
            <a class="button is-success" v-if="activeTab>0" @click="getBackActiveTab">Back </a>
            <a class="button is-success" v-if="activeTab==5" @click="addInfo">Submit </a>
            <a class="button is-success" v-if="activeTab<5" @click="getNextActiveTab">Next</a>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import Title from '@/components/Title'
import Registration from '@/components/Registration'
import {HTTP} from '@/api/http-common'
import bus from '@/bus'

export default {
  name: 'Home',
  components: {
    'app-title': Title,
    'app-registration': Registration,


  },
  data () {
    return {
      activeTab: 0,
      title: {
        titleNo: '',
        address: {}
      },
      registration: {
        ownerName:'',
        transTagNo:'',
        tempDate:'',
        address: {}
      },
      address: {
        line1: '',
        line2: '',
        city: '',
        state: '',
        zip: ''
      },
      hasErrors: false
    }
  },
  methods: {
    getNextActiveTab (event) {
        if (this.activeTab == 0){
          this.validateTitleTab()
        }
          if (this.activeTab == 1){
          this.validateRegistrationTab()
        }
          this.$nextTick(() => {
            if (!this.hasErrors) {
              this.activeTab = this.activeTab+1
              this.$emit('activeTab',{activeTab:this.activeTab})
            }
          })
    },
    getBackActiveTab (event) {
      this.activeTab = this.activeTab-1
      this.$emit('activeTab',{activeTab:this.activeTab} )
    },
    validateTitleTab () {
      bus.$emit('validate-title')
      bus.$emit('validate-address')
          this.hasErrors = false
          Title.$validator.validateAll().then(result => {
            if(!result) {
              this.hasErrors = true
            } 
          })
    },
    validateRegistrationTab () {
      bus.$emit('validate-registration')
      // bus.$emit('validate-address')
          this.hasErrors = false
          this.$validator.validateAll().then(result => {
            if(!result) {
              this.hasErrors = true
            }
          })
          },
    addInfo () {
      var titleInfoRequest = this.title
      titleInfoRequest.addressRequest = this.title.address
      var registrationRequest = this.registration
      registrationRequest.addressRequest = this.registration.address
      var mvdlsInfoRequest = {'titleInfoRequest': titleInfoRequest, '
         'registrationRequest': registrationRequest,}
      HTTP.post('/info', infoRequest)
          .then(response => {
          })
          .catch(e => {
              this.err.push(e)
          })
    }
  },
  created () {
      bus.$on('validated', (errors) => {
        this.hasErrors = true
        errors.forEach(error => {
          this.$validator.errors.push(error)
        })
      })
    }
}
</script>

registration.vue

<template>

    <div class="Registration">
        <div class="container">
             <div class="columns">
                <div class="column is-10">       
                    <div class="box has-text-left"> 

                            <div class="columns">
                                <div class="column">
                                    <b-field label="Owner Name" :type="errors.has('Owner Name') ? 'is-danger': ''" :message="errors.has('Owner Name') ? errors.first('Owner Name'): ''">
                                        <b-input name="Owner Name" v-model="registration.ownerName" v-validate="'required'"></b-input>
                                    </b-field>
                                </div>
                            </div>

                            <div class="columns">
                                <div class="column">
                                    <b-field label="Trans Tag No" :type="errors.has('Trans Tag No') ? 'is-danger': ''" :message="errors.has('Trans Tag No') ? errors.first('Trans Tag No'): ''">
                                        <b-input name="Trans Tag No" v-model="registration.transTagNo"  v-validate="'required'"></b-input>
                                    </b-field>
                                </div>
                                <div class="column">
                                    <b-field label="Temp Date">
                                        <b-datepicker 
                                            placeholder="Click to select" 
                                            icon="calendar"
                                            :readonly="false" 
                                            v-model="registration.tempDate">
                                        </b-datepicker>
                                    </b-field>
                                </div>
                            </div>
                        <app-address :inputAddress="registration.address"></app-address>  
                         
                    </div>     
                </div>
            </div>        
        </div>    
    </div>
</template>

<script>
import {HTTP} from '@/api/http-common'
import bus from '@/bus'
export default {
    name: "Registration",
    
    props: {
      registration: Object
    },
  created () {
    bus.$on('validate-registration', () => {
        this.$validator.validateAll().then(result => {
        if(!result) {
          bus.$emit('validated', this.$validator.errors)
        }
      })
    })
  }
}
</script>

title.vue

<template>
    <div class="Title">
        <div class='container'>
            <div class="columns">
                <div class="column is-10">  
                <div class="box has-text-left">
                    <div class="columns">
                        <div class="column">
                            <b-field label="Title No*" :type="errors.has('Title No') ? 'is-danger': ''" 
                                :message="errors.has('Title No') ? errors.first('Title No'):''">                       
                                <b-input name="Title No" v-model="title.titleNo" v-validate="'required'"></b-input> 
                            </b-field>
                        </div>
                    </div>
                    <app-address :address="title.address"></app-address>
            </div>
        </div>
         
        </div>
    </div>
</template>

<script>

import {HTTP} from '@/api/http-common'
import bus from '@/bus'

export default {
  name: 'Title',
  props: {
      title: Object
  },
  methods: {
      addTitlesInfo () {
          
          HTTP.post('/titlesinfo', this.title)
          .then(response => {
              this.title = {};
             
          })
          .catch(e => {
              this.err.push(e)
          })
      }
  },
  created () {
    bus.$on('validate-title', () => {
        this.$validator.validateAll().then(result => {
        if(!result) {
          bus.$emit('validated', this.$validator.errors)
        }
        bus.$emit('validate-address')
      })
      
    })
  }
}
</script>