I am working on a multistep form using vue.js. The parent form collects two inputs and once these are validated, it moves to the next step which involves a child component. I want to pass the values from the parent component to the child component's formData object for submission. How can I achieve this without using $emit to trigger a function?
Parent Form:
<div class="row--flex">
<input type="text" class="form-input text-input center-margin" name="deductibleCardId" id="deductibleCardId" v-model="$v.formData.deductibleCardId.$model" />
<input type="text" class="form-input text-input center-margin" name="savingsCardId" id="savingsCardId" v-model="$v.formData.savingsCardId.$model" />
</div>
//child component call
<GetCard v-if="showDemographics" :is-sub-form="true" @submit="submitDemographics" />
data() {
return {
formData: {
hasCard: null,
deductibleCardId: null,
savingsCardId: null
}
}
Child Component FormData:
const formData = new FormData()
formData.append('method', 'activate')
(bring over these values from parent)
formData.append('card_hd', this.formData.deductibleCardId)
formData.append('card', this.formData.savingsCardId)