Vue js execute a child function from a parent and get data

Question

I was building a step form and i would like to perform validation and fetch data from my child component.

So i have a step form which ive separated into container(parent) and step1(child)

THe child has form data

IN the child i have

<template>
     thre is the form fiedls
</template>
<script>
 data:()=>({
    orderform:{
      first_name:'',
      lastname:''
    }
  }),

methods:{

 submitOrder(){
  this.$validator.validateAll()
     .then(
      (res)=>{
        if(res){
           //pass this.orderform to parent component

         }   

       }
      )

  }


 }

Now in the parent

<script>
   methods:{

    gotonextStep(){
       //here execute submitOrder function in the child mcomponent
       //am stuck
       //also retrieve order form data here.


    }



    }

</script>

How do i execute the function in the child component and retrieve data fom the parent component.

UPDATE ON PARENT STRUCTURE

<stepper>
 <v-stepper-content step="1">
         <child-1></child-1>
    <button  @click.native="gotonextStep">Continue</v-btn>
  </v-stepper-content>
  ...other stepper steps
</stepper>

tony19 · Accepted Answer · 2022-07-16 00:08:30Z

2

Use a ref

<child-1 ref="child1"></child-1>

Then in the parent you can call methods or get data from the child:

methods:{
  goToNextStep(){
     // call child method
     let methodResult = this.$refs.child1.someChildMethod()
     // access data properties in the child
     let childData = this.$refs.child1.someChildDataProperty
  }
}

edited Jul 16, 2022 at 0:08

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 14, 2017 at 14:43

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Santosh Kumar · Accepted Answer · 2017-10-14 14:13:02Z

0

CHILD Component

submitOrder(){
  var that = this;
  this.$validator.validateAll()
     .then(
      (res)=>{
        if(res){
           //pass this.orderform to parent component
           that.emit('childValidated',this.orderform);

         }   

       }
      )

  }

Parent Component

<child-component-name @childValidated="gotonextStep"></child-component-name>

methods:{

gotonextStep(dataFromChild){
   //here execute submitOrder function
   //am stuck
   //also retrieve order form data here.
}
} </script>

edited Oct 14, 2017 at 14:13

answered Oct 14, 2017 at 14:05

Santosh Kumar

1,93120 silver badges24 bronze badges

1 Comment

Geoff Over a year ago

what am trying to do is execute the child component function while am in the parent component. Thanks for the insight on the emit.

Collectives™ on Stack Overflow

Vue js execute a child function from a parent and get data

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related