[Vue] Not all required components are mounted - on second load about components-examples

[shershen08]

What we have discovered is that every time the page/component with the payment form is opened within the same session -
Mollie library script creates a div.mollie-components-controller in the HTML - it contains an iframe probably for initializing the secure payment gateway etc.
But this tag resides outside the scope of the Vue app - which means it is not cleared when the user is navigating away or for example closing the form block.

So if you come across situations when your form may be hidden and shown multiple times you have to manually check for this tag and clean this up before initializing again.

I would hope this check or some other mitigation will be someday added to the Mollie.js library.

[doskarj]

Hey, happy to get you an update on this @andyslack.

A bug on our end most likely caused this. Unmounting was fixed in the last release. I would advise you to unmount all Mollie components during the beforeUnmount and mount them again during the onMounted lifecycle event of Vue.

We are also preparing yet another fix, that will unmount Mollie components automatically when they are removed from DOM. However, we still advise developers to unmount Mollie components themselves.

Do not hesitate to reach us again, if you are still experiencing this or any other issue.

[doskarj]

Thank you for reporting this @shershen08.

This is most likely not connected with the issue that andyslack is experiencing. However, I created a new issue report for this while we are looking into it.

[doskarj]

We just release a fix, that will automatically unmount Mollie components when they are removed from DOM. This was mentioned in #24 (comment).