Модель recaptcha пуста vue.js

Проблема

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

Я могу подтвердить, что капча успешно отображается.


vue.js laravel-5.6
person Pankaj    schedule 19.03.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

vue-recaptcha как не свойство value/v-model. Вы можете использовать событие verify:

См. демонстрацию JSFiddle здесь.

Код:

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>
person acdcjunior    schedule 19.03.2018
comment
можно сюда подсказать? stackoverflow .com/questions/49364689/ - person Pankaj; 19.03.2018