Javascript ReCaptcha v2韩元'；vue路由器导航中的t加载

我正在使用Google ReCaptcha v2，我正在将其集成到注册过程中。因此，当用户转到

/register

时，它将加载

register组件

但是，如果说我在主页中，并通过按钮导航到

/register

，则不会加载reCaptcha。为什么会这样

我正在

layouts.master.php

中加载脚本：

并在寄存器组件中加载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>

{{error}}

---

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

如果有人遇到同样的问题，以下是解决方法：

• 将id分配给reCaptcha小部件
• 然后在创建组件时，运行

  setTimeout

  来呈现小部件

例如：

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

就这样

更新-最佳方法

不要使用

setTimeout

，而是使用

nextTick（）

，它基本上只在视图（包括子视图）加载完成后运行

分配id，然后在创建的

钩子中运行此操作：

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

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

我希望这对您有用：）
@Damon-answer很有用，而且非常棒-我想我应该发布一些vue组件代码来帮助其他人实现它：

created() { // in whatever component has a recaptcha
    window.sendMsg = this.sendMsg // making the callback function from the vue object available to the google script in the global scope.
    console.log('grecaptcha', grecaptcha)
    this.$nextTick(function() {
        grecaptcha.ready(function() { // making sure the recapcha script is loaded
            try {
                grecaptcha.render('invisibleRecaptcha1') //render the plain-jane recaptcha element with the given id
            } catch (err) { // dont care about errors, because the worst that can happen is maybe it already rendered once.
                err
            }
        })
    })
}

我们的想法是，您应该像往常一样将google脚本标记放在
head
中，然后使用最简单的静态集成标记：

<button id="invisibleRecaptcha1" class="g-recaptcha" data-sitekey="6Lc7hdkZ**********************" data-callback="sendMsg" data-action="submit">Shout!</button>

喊！

其中，
sendMsg
是您使用recaptcha保护的任何函数。
检查浏览器控制台中是否有任何错误。@SagarTamang最初没有任何错误。但是当我尝试注册用户时，我得到了这个
未捕获的错误：不存在reCAPTCHA客户端。
错误！您能检查recaptcha库是否安装在注册组件页面中吗。@SagarTamang您是什么意思？当我通过浏览器直接访问
/register
时，会加载reCaptcha。但是，当我通过主页中的按钮访问RegisterComponent时，根本不会加载reCaptcha：（在
RegisterComponent
中，只有问题中发布的代码量！这是在哪里记录的？
<button id="invisibleRecaptcha1" class="g-recaptcha" data-sitekey="6Lc7hdkZ**********************" data-callback="sendMsg" data-action="submit">Shout!</button>