[解決済み】VueJSコンポーネントに外部JSスクリプトを追加する方法は？

質問

決済ゲートウェイに2つの外部スクリプトを使用する必要があります。

現在、両方とも index.html ファイルを作成します。

しかし、これらのファイルを冒頭で読み込むこと自体はしたくないのです。

決済ゲートウェイは、ユーザーが特定のコンポーネント( using router-view ).

どうにかして実現できないでしょうか？

ありがとうございます。

解決方法は？

この問題を解決する簡単で効果的な方法は、外部スクリプトをvueの mounted() を作成します。ここでは Google Recaptcha スクリプトを使用します。

<template>
   .... your HTML
</template>

<script>
  export default {
    data: () => ({
      ......data of your component
    }),
    mounted() {
      let recaptchaScript = document.createElement('script')
      recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
      document.head.appendChild(recaptchaScript)
    },
    methods: {
      ......methods of your component
    }
  }
</script>

出典 https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8