我希望在安装recaptcha
组件后呈现Vue.js
。它适用于正常加载和重新加载,但是当我导航到另一个url
并单击浏览器后退按钮时,它会抛出错误。
这是我的设置:
我正在页面底部加载api
脚本:
<script src='https://www.google.com/recaptcha/api.js' async></script>
在该页面上,我呈现了一个名为Contact.vue
的全局注册组件,其中包含一个名为Recaptcha.vue
的本地组件:
<app-recaptcha @recaptchaResponse="updateRecaptchaResponse"></app-recaptcha>
Recaptcha.vue
的代码如下所示:
<template>
<div id="app-recaptcha">
<div :id="placeholderId"></div>
</div>
</template>
<script>
export default {
data() {
return {
sitekey: 'key_here',
placeholderId: 'grecaptcha',
widgetId: null
}
},
mounted() {
this.$nextTick(function () {
this.render();
});
},
methods: {
render() {
this.widgetId = window.grecaptcha.render(this.placeholderId, {
sitekey: this.sitekey,
callback: (response) => {
this.$emit('recaptchaResponse', response);
}
});
},
reset() {
window.grecaptcha.reset(this.widgetId);
}
}
}
</script>
<style>...</style>
正常页面加载/重新加载this.render()
正常执行。但是,当我导航到另一个url
并通过后退按钮返回时,我得到:Error in nextTick: "TypeError: window.grecaptcha.render is not a function"
。
我试图:
在onload
脚本的api
事件上设置变量:
<script src='...' onload="window.script = { recaptcha: 'ready' }" async></script>
然后将其添加为data()
Recaptcha.vue
中的属性:
ready: window.script.recaptcha
接下来,我在ready
属性上添加了一个观察者,并且在该观察者中我试图运行this.render()
没有成功,错误仍然存在。我认为即使在正常的加载/重载情况下,我也只是“幸运的”#34; api
脚本在组件挂载之前加载,将this.render()
置于mounted()
挂钩内是没有用的。
您知道如何通知Recaptcha.vue
外部脚本已完成加载,然后才呈现recaptcha
?
答案 0 :(得分:3)
好的,这是一个理论:添加数据属性
captchaReady: false,
checkingInterval: null,
创建
let localThis = this
this.checkingInterval = setInterval(function(){
if (window.grecaptcha) {
localThis.captchaReady = true
}
}, 500) //or whatever interval you want to check
然后
watch: {
captchaReady: function(data) {
if (data) {
clearInterval(this.checkingInterval)
this.render()
}
}
}