Загрузите внешний файл js, а затем сразу же создайте ссылку на созданный объект [Vuejs2]

Question

Я загружаю умную кнопку Paypal в компонент vue.Я попытался загрузить внешний сценарий Paypal js, который, кажется, создает объект PayPal.

Однако при попытке получить доступ к объекту PayPal, я получаю эту ошибку:

found in

---> <PaypalButton> at resources/assets/js/components/PaypalButton.vue
       <Root>

После загрузки страницы я могу успешно console.log (paypal) в окне консоли инструментов Chrome Dev., и я также могу успешно создать кнопку vue для доступа к ней, но, похоже, на нее нельзя ссылаться в смонтированном хуке.

Вот код:

<template>
  <div class="paypal-button-wrapper">
    <div id="paypal-button-container"></div>
    <button @click="showPaypal">Clicking this successfully renders the button</button>
  </div>
</template>

<script>
export default {
  data: () => ({
  }),
  mounted: function () {
    let paypalScript = document.createElement('script');
    paypalScript.setAttribute('src', 'https://www.paypal.com/sdk/js?client-id=AUo4kSgRdH44poEYLQwPdqM24oN8nQc4Jm1HAkWs5vQTAMGu-BBlpfN4xnMDEzSGfj4wjwOy6eLtNKyv&currency=USD');
    document.head.appendChild(paypalScript);
    this.showPaypal(); // fails to render the paypal button, with reference error
  },
  methods: {
    showPaypal: function() {
        paypal.Buttons().render('#paypal-button-container');
    }
  }

};
</script>

Answer 1

Решением является использование paypalScript.onload.Я не уверен, что это самый прямой метод, но он работает.

mounted: function () {
    let paypalScript = document.createElement('script');
    paypalScript.setAttribute('src', 'https://www.paypal.com/sdk/js?client-id=SB_ID&currency=USD');
    document.head.appendChild(paypalScript);
    var that = this;
    paypalScript.onload = function () {
        that.showPaypal();
    };
},

Ссылка: Запустите метод компонента Vue после загрузки внешнего скрипта