Estoy tratando de hacer que Plaid funcione en VueJS, pero simplemente no puedo cargar el JS.
Esto funciona bien con Vanilla JS: https://jsfiddle.net/5vnh2ubs/
Pero esto simplemente no parece funcionar:
<template> <div id="app"> {{ pl }} </div> </template> <script> export default { beforeMount() { this.pl = this.Plaid; }, data() { return { pl: null, }; }, }; </script>Intenté importar el script en el archivo index.html y usé vue-plugin-load-script pero nada parece funcionar.
Nunca tuve este problema al cargar archivos JS en el archivo index.html.
Editar:
Así es como intenté cargarlo usando 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'); });Y en index.html, es una simple etiqueta de secuencia de comandos entre las etiquetas principales:
<script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>Puedo ver que la etiqueta del script está allí cuando inspecciono los elementos, pero llamar a Plaid no devuelve nada.
El script Plaid CDN crea una variable global: window.Plaid . Sin embargo, su componente se refiere incorrectamente a él a través de this.Plaid . En Vue SFC, this es la instancia del componente, que solo contiene sus propias propiedades declaradas en la definición del componente. this no incluye las variables globales de la window .
La solución es usar window.Plaid :
export default { data() { return { pl: window.Plaid, } } }