Unable to integrate with Vue

[8webdesign]

I'm trying to integrate Mosparo to my Vue multistep form.
Unfortunately the box is not showing.
I run a test with using a simple html page and it worked, but for some reason I can't get it to work on my Vue form.

This is the link, https://widgets.koalawidgets.com/test the captcha should show in the 6th step before the submit button.
If you look at the source code, you'll see the code is there. What have I done wrong?

[zepich]

Hi @8webdesign

Thank you very much for your message.

In the browser console, I see the error message Cannot find the mosparo container. (https://github.com/mosparo/mosparo/blob/master/assets/mosparo-frontend.js#L77) from the mosparo script. This means that when the mosparo initialization (new mosparo(...);) is executed, the container (#mosparo-box) is not found in the DOM. Because your form is split into steps, only the HTML structure of the first step is available in the DOM.

The solution for this problem is to wait to initialize the mosparo box and initialize the mosparo box as soon as the 6th step is shown to the user. The initialization script of mosparo is in your main HTML code (right now) and executed as soon as the page is fully loaded (when the user sees the first step of your form).

Does this help with solving the problem?

Kind regards,

zepich