Last active
December 6, 2016 22:00
-
-
Save asvae/96e0e2de6e91a3748b1a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Here's the usage example: | |
<vm-recaptcha :value.bind="form.recaptcha"></vm-recaptcha> | |
And you have to include cdn as always. This gist doesn't cover serverside. | |
<template> | |
<div :id="id" value=""></div> | |
</template> | |
<script> | |
module.exports = { | |
data: function () { | |
return { | |
recaptchaKey: this.$api.load('recaptcha-key'), | |
} | |
}, | |
ready: function (){ | |
this.rerender(); | |
}, | |
methods: { | |
rerender: function (){ | |
if (this.recaptchaKey.downloaded && window.grecaptcha !== undefined){ | |
window.grecaptcha.render(this.id, { | |
sitekey: this.recaptchaKey.data, | |
callback: function (response){ | |
console.log(response); | |
this.value = response; | |
}.bind(this), | |
}); | |
return; | |
} | |
setTimeout(this.rerender.bind(this), 500); | |
} | |
}, | |
props: ['value'] | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for sharing. Interesting is it works when captcha reloads after transition, I see you not store
id
of captcha. There is some recipe for this https://maketips.net/tip/61/recaptcha-with-vuejs-example