Question

我的目标是启用表单按钮，如果用户正确回复了recaptcha，我已经找到了使用纯javascript（stackoverflow solution）的解决方案，但我需要使用VueJs，当使用时recaptcha的data-callback属性，它表示一个错误，它说：“ReCAPTCHA找不到用户提供的函数：responseRC（）”，我无法得到答案并激活按钮。

我的代码 - HTML

<div id='app'>
  <label for="name">
    <input type="text" name="name" v-model="namex">
  </label>
  <label for="agree">
    <input id="agree" type="checkbox" value="agree" />I Agree</lable>
  <p>
    <hr>
   <div class="g-recaptcha" data-sitekey="6Ld8BDUU0000Edp4MdRqV24fKJe8llSzLfiEQEH" data-callback="responseRC()" ></div>
  <hr>
  <button :name="buttonX" disabled>Button</button>
</div>

Code Vue JS

var ins = new Vue({
      el : '#app',
      data: {
        //checked : false,
        namex: 'Javier',
        buttonX: ''
      },
      mounted: function() {
        this.buttonX.disabled;
        console.log('monta algo');

      },
      beforeupdated: function(){
        console.log('cambia algo');
        this.buttonX.disabled.false;
      },

      methods: {
        disableButton: function(){
            this.buttonX.disabled=false;
        },
        responseRC: function(){
            console.log("The captcha has been already solved");
            if(grecaptcha.getResponse().length !== 0){
               console.log("The captcha has been already solved");
            }
        }

      }
    });

Answer 1

简而言之，您必须使用@verify，在该方法内部将其用于切换boolean标志并将其包含在:disabled的{{1}}

我得到的逻辑（button / Vuetify / Class API语法）：

HTML格式的（您可能会跳过TypeScript，我将其用于reset reCAPTCHA on reset button click）

ref

：在按钮上禁用（请注意<vue-recaptcha @verify="recaptchaVerified" ref="recaptcha" sitekey="ABC..." ></vue-recaptcha>标志）

isRecaptchaValid

TypeScript逻辑

<v-btn
  :disabled="!isFormValid || !isRecaptchaValid"
  text
  color="purple darken-2"
  type="submit"
  >Send</v-btn
>

根据recaptcha用户Vuejs的响应启用提交按钮

1 个答案: