推迟执行,直到外部脚本加载到Vue.js

时间:2018-02-08 19:50:01

标签: javascript javascript-events vue.js vuejs2 recaptcha

我希望在安装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

1 个答案:

答案 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()
    }
  }
}