Reputation: 144
I have the following events that emit to the parent component and work fine:
this.$emit('sendToParent1', true);
this.$emit('sendToParent2');
this.$emit('sendToParent3');
this.$emit('sendToParent4', true);
this.$emit('sendToParent5', false);
However, I ran into a specific problem which requires me to do emit those 5 events, in that order, but one after another.
//emit this first and wait until the parent has finished what its supposed to do
this.$emit('sendToParent1');
//after the parent is done, we emit the next one from the child
this.$emit('sendToParent2');
//same behavior, once it is emitted to parent and the parent finishes executing, then we emit the next one...
this.$emit('sendToParent3');
//again
this.$emit('sendToParent4', true);
//and again
this.$emit('sendToParent5', false);
I believe that the best approach is to have a prop detecting when an event has finished executing whatever it is supposed to do and then sending a prop to the child, then when that prop is updated the next emit gets executed and so forth and so on. Can someone point me in the best direction of how to solve this?
The Parent has the following component:
<component v-on:sendToParent5="parentFunctionFive" v-on:sendToParent4="parentFunctionFour" v-on:sendToParent1="parentFunctionOne" v-on:sendToParent2="parentFunctionTwo" v-on:sendToParent3="parentFunctionThree"></component>
The Parent has 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) {
//changing the value of a variable in data
this.trueOrFalse = passed_value;
},
parentFunctionFive: function(passed_value) {
//changing the value of a variable in data
this.valuePassed = passed_value;
}
Upvotes: 0
Views: 2046
Reputation: 10070
It would easier for us to answer if you explained what your ultimate goal is (see XY problem), but from the information that you provided I think proper way would be to pass a function called next
as the event param and trigger it when the work is done which will make the process to continue to the next stage.
this.$emit('sendToParent1', {
value: true,
next:
() => this.$emit('sendToParent2', {
value: false,
next: () => this.$emit('sendToParent3', false);
})
});
parentFunctionOne: function({value, next}) {
axios.get('/api/do_something-1/')
.then((res)=>{
this.something1 = res.data;
next() // proceed
})
.catch((error)=>{
console.log(error);
});
},
parentFunctionTwo: function({value, next}) {
axios.get('/api/do_something-2/')
.then((res)=>{
this.something2 = res.data;
next() // proceed
})
.catch((error)=>{
console.log(error);
});
},
parentFunctionThree: function() {
axios.get('/api/do_something-3/')
.then((res)=>{
this.something3 = res.data;
})
.catch((error)=>{
console.log(error);
});
},
Upvotes: 1
Reputation: 366
you should rethink about the way you implement the component i think you could try emit one event with all the information you need and in the parent call the appropriate function.
if you want to implement it in this way you could us a variable that you send with event and increment it every time an event has occurred and in the parent track that variable and execute the event in the right order like in the http protocole
Upvotes: 0