recaptcha 模型为空 vue.js

Question

问题

loginForm.recaptcha 始终为空白。我错过了什么吗？

组件

<template>
    <div>
        <vue-recaptcha  v-model="loginForm.recaptcha"
            sitekey="My key">
        </vue-recaptcha>
    </div>
</template>

<script>
    export default {
        data() {
            return { 
                loginForm: {
                    recaptcha: ''
                }
            }
        }
    }
</script>

app.js

import VueRecaptcha from 'vue-recaptcha';
Vue.use(VeeValidate);
Vue.component('vue-recaptcha', VueRecaptcha);

我可以确认验证码渲染成功。

Answer 1

vue-recaptcha 因为没有 value/v-model 属性。您可以使用 verify 事件：

参见 demo JSFiddle here。

代码：

Vue.component('vue-recaptcha', VueRecaptcha);

new Vue({
  el: '#app',
  data: {
    loginForm: {
      recaptcha: ''
    }
  },
  methods: {
    recaptchaVerified(response) {
     this.loginForm.recaptcha = response;
    }
  }
})

<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>
</script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-recaptcha@latest/dist/vue-recaptcha.js"></script>

<div id="app">
   <div>
        <vue-recaptcha @verify="recaptchaVerified"
            sitekey="your key">
        </vue-recaptcha>
    </div>
   loginForm: {{ loginForm }}
</div>