javascript - ReCaptcha v2 不会在 vue-router 导航中加载

Question

我正在使用 Google ReCaptcha v2，我正在将其集成到注册过程中。所以，当用户去 /register , 它加载 RegisterComponent .

但是，当我在主页并导航到 /register 时，reCaptcha 不会加载通过一个按钮。为什么会这样？

我正在加载 layouts.master.php 中的脚本:

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

然后像这样在 Register 组件中加载 reCaptcha:

<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>

然后使用 PHP 验证此 reCaptcha。所以，没有 JS 逻辑!请帮忙!

Answer 1

如果有人遇到同样的问题，这里是解决方法:

• 将 ID 分配给您的 reCaptcha 小部件。
• 然后在创建组件时，运行 setTimeout 来呈现小部件。

例子:

<div id="recaptcha-main" class="g-recaptcha" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></div>

然后在您要加载验证码的组件中:

created() {
    setTimeout(() => {
        grecaptcha.render('recaptcha-main'); // 'recaptcha-main' is the id that was assigned to the widget
    }, 2000);
}

就是这样!

已更新 - 最佳方法

不使用 setTimeout，而是使用 nextTick()，它基本上只在包含 View 之后运行。 children 完成加载。

您分配 id，然后在您的 created Hook 中运行它:

this.$nextTick(function () {
    grecaptcha.render('recaptcha-main');
})

setTimeout 的缺点是它只在指定时间后运行。比如说 1 秒。因此，如果您的组件需要超过 1 秒的时间才能完全加载，那么 setTimeout 在这里可能不起作用，因为它将在 1 秒后立即执行。

我希望这对你有用:)