[Vuejs]-Vuejs calling function in child component after parent function is completed

You can solve this issue using promises. They are perfect for this.

Create yourself an onClick function in your component that your button will call.

Make the functionParent return a promise.

Then your onClick function will look a little like this….

function onClick () {
  functionParent().then( () => {
    functionChild()
  })
}

Your function parent will look a bit like this…

functionParent () {
    return new Promise((resolve, reject) => {
    // do your stuff ....
    resolve()
  })
}

Hope that helps.

You can find info on promises here..

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Using a timeout is not a good option. There is no guarantee your functions will finish in the correct order

If anyone will have the same problem – this is very primitive solution that I invented thanks to @Meet Zaveri help:

just call functionChild() from functionParent() with time delay. In this case:

functionParent() {
  this.resultArray = "result"
  setTimeout(() => {this.$refs.childComponent.functionChild();}, 100)
}

This will give Vue time to send the updated resultArray into the child props

I know there could and should be a better solution to this, but if you have no other option or idea this is the easiest one.

If you have a better answer, just post it here and let me know!