Vue-js-modal: Show modal on component creation / mount

[patrickcorrigan]

Problem:

I'm trying to show the modal when it's parent component is created. I tried calling it in the created lifecycle hook but it didn't work. Then it occurred to me that it might work there as the html wouldn't have rendered yet so I tried it in the mounted lifecycle hook. Still didn't work. Why would this be. Thank you very much :) The modal shows when calling show from a button click though

// Works :)
newOrganisationClickHandler() {
  this.$modal.show('organisation-wizard');
},

// Doesn't Work :(
  mounted() {
      this.$modal.show('organisation-wizard');
  },

[euvl]

Depending on where it is plonked, it still might not be mounted when this particular component mounts.

Try giving it a bit more time with smth like this.$nextTick(() => { show modal }))

[patrickcorrigan]

Oh yes. Very clever. Why wouldn't it be mounted yet? Shouldn't the child components mounted lifecycle handler be fired before the parents?

https://medium.com/@brockreece/vue-parent-and-child-lifecycle-hooks-5d6236bd561f

[euvl]

¯\_(ツ)_/¯

I don't really know what your structure is, but I am sure that modal is not a direct ancestor of your component, meaning that parent-child relationships are not applicable in this case. Or maybe they are, god knows 😄

[patrickcorrigan]

Update. Having it in mounted works without a timeout or waiting for next tick. My issue was that the block that the modal was in was wrapped in a v-if based on the data being loaded from the network. Changing it to a v-show fixed it :)

[edshen17]

I had a similar problem. Changing v-if to v-show didn't work for me, so I just moved my modal outside of a wrapped v-if div and it worked. Thanks!