Loading Plaid JS from CDN in VueJS-CodePudding

I'm trying to get Plaid working in VueJS but I just can't get the JS loading.

This works fine using Vanilla JS: https://jsfiddle.net/5vnh2ubs/

But this just doesn't seem to work:

<template>
  <div id="app">
    {{ pl }}
  </div>
</template>

<script>
export default {
  beforeMount() {
    this.pl = this.Plaid;
  },
  data() {
    return {
      pl: null,
    };
  },
};
</script>

I've tried importing the script in the index.html file and used vue-plugin-load-script but nothing seems to work.

I've never had this issue when loading JS files in the index.html file.

Edit:

This is how I've tried loading it using vue-plugin-load-script:

this.$loadScript('https://cdn.plaid.com/link/v2/stable/link-initialize.js')
.then(() => {
    console.log(this.Plaid);
})
.catch(() => {
    console.log('error');
});

And in index.html, it's a simple script tag between the head tags:

<script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>

I can see the script tag is there when I inspect elements but calling Plaid returns nothing.

CodePudding user response：

The Plaid CDN script creates a global variable: window.Plaid. However, your component incorrectly refers to it via this.Plaid. In the Vue SFC, this is the component instance, which only contains its own properties declared in the component definition. this does not include global variables from window.

The solution is to use window.Plaid:

export default {
  data() {
    return {
      pl: window.Plaid,
    }
  }
}

demo