Wie mehrere ReCaptcha in derselben Komponente in vue.js hinzufügen?

Question

Ich habe eine Komponente, die 2 Registerkarten enthält. Ich muss ReCaptcha zu beiden Tabs hinzufügen. Ich habe den folgenden Code, aber captcha erscheint nur in dem ersten Registerkarte

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

In 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 }); 
    } 
} 

Wenn ich die Seite aktualisieren, captcha in dem ersten Registerkarte zeigt.

Answer 1

Dies ist aufgrund der Art und Weise, wie ReCaptcha arbeiten, Sie können nicht mehrere ReCaptcha auf einer Seite, die Sie in Ihrer Komponente tun Rendern. (https://groups.google.com/forum/#!topic/recaptcha/kOYcRJCSDXM).

Entweder lassen Sie alle Formulare das gleiche ReCaptcha auf einer Seite teilen, oder verwenden Sie Popups, um das ReCaptcha anzuzeigen, oder versuchen Sie, das Rendering und Parsing auf den Server und einige AJAX zu entladen.