Comment ajouter plusieurs reCaptcha dans le même composant dans vue.js?

Question

J'ai un composant qui contient 2 onglets. J'ai besoin d'ajouter reCaptcha aux deux onglets. Je l'ai fait le code suivant, mais captcha apparaît que dans le premier onglet

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

Quand j'actualisez la page, captcha est montré dans le premier onglet.

Answer 1

Cela est dû à la façon dont fonctionne ReCaptcha, vous ne pouvez pas rendre plusieurs ReCaptcha sur une page, ce que vous faites dans votre composant. (https://groups.google.com/forum/#!topic/recaptcha/kOYcRJCSDXM). Soit vous laissez tous les formulaires partager la même ReCaptcha sur une page, soit vous utilisez des popups pour afficher le ReCaptcha ou essayez de décharger le rendu et l'analyse sur le serveur et un peu d'AJAX.