title: Vue.js - Access component methods on onload
body: <p>I use <code>vue-js</code> and <code>stripe</code> to implement some of my payment.</p>
  
  <p>The only way to use the <code>Stripe</code> with <code>vue-js</code> was with <code>script.onload</code>. I would like now to access some of my <code>methods</code> within the <code>onload</code> function. In this example it is the function <code>myMethod</code> called with <code>self.myMethod</code></p>
  
  <p>To do so I created <code>self</code> variable but it happens to be undefined in the scope of <code>onload</code>.</p>
  
  <p>How could I do to make it available ?</p>
  
  <p>In the current example <code>self</code> refers to <code>Window</code> object.</p>
  
  <h3>Component.vue</h3>
  
  <pre><code>&lt;template&gt;&lt;/template&gt;
  
  &lt;script&gt;
  export default {
       data() {
           const self = this;
           return {}
       },
  
       methods: {
           myMethod() {}
       },
  
       mounted() {
           let script = document.createElement('script');
           script.src = "https://js.stripe.com/v3/";
           script.onload = () =&gt; {
               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);
       }
   }
  &lt;/script&gt;
  &lt;style&gt;&lt;/style&gt;
  </code></pre>