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

我想在安装Vue.js组件后渲染recaptcha.它可以正常加载和重新加载，但当我导航到另一个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".

我试图:

• 在api脚本的onload事件上设置一个变量:

  <script src='...' onload="window.script = { recaptcha: 'ready' }" async></script>

• 然后将其作为属性添加到Recaptcha.vue中的data():

  ready: window.script.recaptcha

• 接下来，我在ready属性上添加了一个观察者，并在该观察者中try 运行this.render()

没有成功，错误仍然存在.我认为，即使在正常的加载/重新加载情况下，我也只是"幸运地"在安装组件之前加载了api个脚本，而在mounted()钩子中放置this.render()也没有帮助.

你知道我怎样才能告诉Recaptcha.vue外部脚本已经加载完毕，然后才渲染recaptcha吗？