javascript - Vue.js - 在 onload 上访问组件方法

Question

我使用 vue-js 和 stripe 来实现我的一些付款。

将 Stripe 与 vue-js 结合使用的唯一方法是使用 script.onload。我现在想在 onload 函数中访问一些方法。在此示例中，它是使用 self.myMethod

调用的函数 myMethod

为此，我创建了 self 变量，但它恰好在 onload 范围内未定义。

我该如何才能使其可用？

在当前示例中，self 指的是 Window 对象。

组件.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 Hook 本身中定义 self 变量:

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