如何在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，而這是您在組件中執行的。 （ https://groups.google.com/forum/#!topic/recaptcha/kOYcRJCSDXM ）。

您可以讓所有表單在一頁上共享相同的ReCaptcha，或者使用彈出窗口顯示ReCaptcha，或者嘗試將呈現和解析工作卸載到服務器和某些AJAX。