외부 스크립트가 Vue.js에 로드될 때까지 실행을 연기합니다.

외부 스크립트가 Vue.js에 로드될 때까지 실행을 연기합니다.

렌더링하고 싶다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

• 그 다음, 저는 Watcher를 추가했습니다.ready그 감시자 안에서 도망치려고 했어요this.render()

성공하지 못했습니다. 아직 오류가 남아 있습니다.통상적인 부하/재로드 상황에서도, 단지 「행운」이라고 생각합니다.api컴포넌트가 마운트되기 전에 스크립트가 로드되고 그 배치this.render()내부mounted()후크는 도움이 안 돼요

내가 어떻게 신호를 보낼 수 있는지 알아?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()
    }
  }
}

언급URL : https://stackoverflow.com/questions/48693664/defer-execution-until-external-script-has-loaded-in-vue-js