如何在vue.js的相同组件中添加多个reCaptcha？

Question

我有一个包含2个选项卡的组件。我需要添加reCaptcha到两个选项卡。我做了下面的代码，但验证码只出现在第一个选项卡

<div class="tab-content clearfix"> 
<div class="tab-pane active" id="1a"> 
    <form> 
    <div class="g-recaptcha" id="recaptchaTab1" :data-sitekey="rcapt_sig_key"></div> 
    </form> 
</div> 
</div> 
<div class="tab-content clearfix"> 
<div class="tab-pane active" id="1a"> 
    <form> 
    <div class="g-recaptcha" id="recaptchaTab2" :data-sitekey="rcapt_sig_key"></div> 
    </form> 
</div> 
</div> 

在javascript中

data() { 
return { 
    rcapt_sig_key: "site_key", 
    recaptchaTab2: 0, 
    recaptchaTab1: 0 
    } 
}, 
mounted() { 
    if (window.grecaptcha) { 
    this.rcaptIdTab2 = grecaptcha.render('recaptchaTab2', { sitekey : this.rcapt_sig_key }); 
    this.rcaptIdTab1 = grecaptcha.render('recaptchaTab1', { sitekey : this.rcapt_sig_key }); 
    } 
} 

当我刷新页面，验证码被显示，第一个标签。

Answer 1

这是由于ReCaptcha如何工作的原因，您无法在一个页面上呈现多个ReCaptcha，而您正在组件中执行多个ReCaptcha。 （https://groups.google.com/forum/#!topic/recaptcha/kOYcRJCSDXM）。

要么让所有表单在一个页面上共享相同的ReCaptcha，要么使用弹出窗口显示ReCaptcha，或尝试将渲染和分析卸载到服务器和一些AJAX。