我想渲染一个 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()
没有成功,错误依然存在。我认为即使在正常的加载/重新加载情况下,我也很“幸运” api
在安装组件之前加载脚本,然后放置 this.render()
在mounted()
里面钩子(Hook)没有帮助。
你知道我怎么发信号吗Recaptcha.vue
外部脚本已完成加载,然后才呈现 recaptcha
?
最佳答案
好吧,这是一个理论:添加数据属性
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()
}
}
}
关于javascript - 推迟执行,直到外部脚本加载到 Vue.js 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48693664/