사용 정상 회의 버튼을 recaptcha 사용자 Vuejs의 반응에 따라.

사용 정상 회의 버튼을 recaptcha 사용자 Vuejs의 반응에 따라.

나의 목표는 사용자가 recaptcha에 반응하는 한 형태가 단추, 나는 이미 해결책을 순수한javascript(stackoverflow 해결책) 했을 때 recaptcha의data-callback 특성을 사용하여 VueJs 할 필요가 있어 활성화되는 오류를 나타내면 그:"ReCAPTCHAuser-provided 기능:반응 볼 수 있다고 말했다.rC()", 나는 버튼을 작동하는 대답을 할 수 없다.

내 코드-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>

코드 뷰 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");
            }
        }

      }
    });

간단히 말해서, 너를 사용해야만 한다.@verify메서드 안에 그것은을 토글 하려면 연결시켜 드리겠습니다.boolean국기이자 세계에서 이 포함한다.:disabled의button.

그 논리 나는(Vuetify/Class API/TypeScript구문.

html에서 자세한 내용은ref당신은, 나는 재설정 버튼을 클릭하십시오 리캡차를 재설정하는 것 이것을 사용합니다)을 거를 수도 있다.

<vue-recaptcha
  @verify="recaptchaVerified"
  ref="recaptcha"
  sitekey="ABC..."
></vue-recaptcha>

:버튼을 사용할 수 없도록 설정 자세한 내용은.isRecaptchaValid깃발)

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

TypeScript 논리

public isRecaptchaValid: boolean = false;
public recaptchaVerified(response: any): void {
  this.isRecaptchaValid = true;
}

언급URL : https://stackoverflow.com/questions/47251505/enable-submit-button-according-to-the-response-of-the-recaptcha-user-vuejs