recaptcha model is blank vue.js

Question

Problem

loginForm.recaptcha is always blank. Am I missing anything?

Component

<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);

I can confirm that the captcha is rendering successfully.

Answer 1

vue-recaptcha as no value/v-model property. You can use the verify event:

See demo JSFiddle here.

Code:

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>