I have successfully emitted the following events to the parent component:
this.$emit('sendToParent1', true);
this.$emit('sendToParent2');
this.$emit('sendToParent3');
this.$emit('sendToParent4', true);
this.$emit('sendToParent5', false);
However, I encountered a specific issue that requires me to emit these 5 events in sequence, one after another.
//emit this first and wait for parent to finish its task
this.$emit('sendToParent1');
//after parent finishes, emit next event from the child
this.$emit('sendToParent2');
//same pattern for emitting the next event after parent completes processing
this.$emit('sendToParent3');
//repeat for next event
this.$emit('sendToParent4', true);
//and again for the last event
this.$emit('sendToParent5', false);
I believe the best solution is to use a prop to detect when an event has completed its task and then signal the child component to proceed with the next emission. Can anyone provide guidance on how to implement this?
The Parent component includes the following:
<component v-on:sendToParent5="parentFunctionFive" v-on:sendToParent4="parentFunctionFour" v-on:sendToParent1="parentFunctionOne" v-on:sendToParent2="parentFunctionTwo" v-on:sendToParent3="parentFunctionThree"></component>
The Parent component contains the following methods:
parentFunctionOne: function() {
axios.get('/api/do_something-1/')
.then((res)=>{
this.something1 = res.data;
})
.catch((error)=>{
console.log(error);
});
},
parentFunctionTwo: function() {
axios.get('/api/do_something-2/')
.then((res)=>{
this.something2 = res.data;
})
.catch((error)=>{
console.log(error);
});
},
parentFunctionThree: function() {
axios.get('/api/do_something-3/')
.then((res)=>{
this.something3 = res.data;
})
.catch((error)=>{
console.log(error);
});
},
parentFunctionFour: function(passed_value) {
//updating a variable in data with the passed value
this.trueOrFalse = passed_value;
},
parentFunctionFive: function(passed_value) {
//updating a variable in data with the passed value
this.valuePassed = passed_value;
}