ReCaptcha v2 won't load in vue-router navigation

By | July 17, 2018
Questions:

I am using Google ReCaptcha v2 which I am integrating it for the registration process. So, when the user goes /register, it loads the RegisterComponent.

However, the reCaptcha won’t load when say I’m in Homepage and navigate to the /register via a button. Why is it happening?

I am loading the script in layouts.master.php:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

And loading the reCaptcha in Register Component like so:

<div class="field">
    <div class="control" id="recaptcha-reg">
        <div class="g-recaptcha" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></div>
        <span v-if="regErrors.captcha" v-for="error in errors">{{ error }}</span>
    </div>
</div>

This reCaptcha is then validated using PHP. So, there’s no JS Logic! Please help!

Answers:

Leave a Reply

Your email address will not be published. Required fields are marked *