如何在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。