While developing a step form, I encountered the need to validate and retrieve data from my child component.
The step form is divided into a parent container and a child component (Step 1).
The child component contains form data as follows:
<template>
This is where the form fields are located
</template>
<script>
data:()=>({
orderform:{
first_name:'',
lastname:''
}
}),
methods:{
submitOrder(){
this.$validator.validateAll()
.then(
(res)=>{
if(res){
//pass this.orderform to parent component
}
}
)
}
}
In the parent component, I am struggling to execute the function in the child component and access data from the parent. See the updated parent structure below:
<stepper>
<v-stepper-content step="1">
<child-1></child-1>
<button @click.native="gotonextStep">Continue</v-btn>
</v-stepper-content>
...other stepper steps
</stepper>