Vue.js-onload訪問組件方法

Question

我使用vue-js和stripe來實現一些付款。

將Stripe與vue-js一起使用的唯一方法是script.onload 。 我現在想在onload函數中訪問一些methods 。 在此示例中，它是使用self.myMethod調用的函數myMethod

為此，我創建了self變量，但是它恰好在onload范圍內未定義。

我該怎么做才能使它可用？

在當前示例中， self引用Window對象。

Component.vue

<template></template>

<script>
export default {
     data() {
         const self = this;
         return {}
     },

     methods: {
         myMethod() {}
     },

     mounted() {
         let script = document.createElement('script');
         script.src = "https://js.stripe.com/v3/";
         script.onload = () => {
             const stripe = Stripe('xxxxxxxx');
             const elements = stripe.elements();

             function setOutcome(result) {
                 self.myMethod();
             }
             card.on('change', function(event) {
                 setOutcome(event);
             });
             document.querySelector('form').addEventListener('submit', function(e) {
                 e.preventDefault();
                 const form = document.querySelector('form');
                 stripe.createToken(card).then(setOutcome);
             });
         };
         document.body.appendChild(script);
     }
 }
</script>
<style></style>

Answer 1

您已經在data方法中定義了一個self變量，該變量在該方法之外不可訪問。

您需要在已mounted掛鈎本身中定義self變量：

mounted() {
  let self = this;
  ...
}