Javascript 如何在vue.js的同一组件中添加多个reCaptcha?
我有一个包含两个选项卡的组件。我需要将reCaptcha添加到两个选项卡中。我执行了以下代码,但验证码仅出现在第一个选项卡中Javascript 如何在vue.js的同一组件中添加多个reCaptcha?,javascript,vue.js,vuejs2,recaptcha,Javascript,Vue.js,Vuejs2,Recaptcha,我有一个包含两个选项卡的组件。我需要将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 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>
当我刷新页面时,验证码显示在第一个选项卡中。这是由于ReCaptcha的工作方式,您无法在一个页面上呈现多个ReCaptcha,而您正在组件中执行此操作。 (). 您可以让所有表单在一个页面上共享相同的ReCaptcha,或者使用弹出窗口显示ReCaptcha,或者尝试将呈现和解析工作卸载到服务器和一些AJAX上
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 });
}
}