I am faced with a situation where I have a simple button that triggers two functions, one in the parent component and one in the child component:
<btn @click.native="() => {functionParent();
$refs.childComponent.functionChild()}">Call functions<btn>
Although I am aware that using arrow function for @click event is not considered best practice, I plan to address this issue later.
The current problem lies in the fact that functionParent() needs to be executed fully before functionChild() can begin. However, in my case, functionChild() starts running before functionParent() is complete - which is causing issues.
How can I rectify this? My goal is to ensure that functionChild() is only called after functionParent() has finished executing. Any suggestions on how to achieve this?
Edit: (More details)
In the parent component:
<child-comp
:result-array="resultArray"
ref="childComponent">
</child-comp>
<script>
methods: {
functionParent() {
this.resultArray = "result"
}
}
</script>
In the child component:
<script>
props: ['resultArray'],
methods: {
functionChild() {
if (this.resultArray == "result")
{return "correct"} else {return "done before functionParent()"
}
}
</script>
Edit2: I've tried moving
this.$refs.childComponent.functionChild()functionParent(), but it doesn't seem to change the outcome. It appears that the call to the function in the child component is happening before the child component receives the updated resultArray.