recaptcha 模型为空 vue.js
recaptcha model is blank 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-recaptcha
因为没有 value
/v-model
属性。您可以使用 verify
事件:
代码:
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>
问题
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-recaptcha
因为没有 value
/v-model
属性。您可以使用 verify
事件:
代码:
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>