在 VueJS 中从 CDN 加载 Plaid JS

Question

我试图让 Plaid 在 VueJS 中工作，但我就是无法加载 JS。

使用 Vanilla JS 效果很好： https://jsfiddle.net/5vnh2ubs/

但这似乎行不通：

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

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

我试过在 index.html 文件中导入脚本并使用 vue-plugin-load-script 但似乎没有任何效果。

我在 index.html 文件中加载 JS 文件时从未遇到过这个问题。

编辑：

这是我尝试使用 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');
});

而在 index.html 中，它是 head 标签之间的一个简单脚本标签：

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

当我检查元素但调用 Plaid returns 时，我可以看到脚本标签在那里。

Answer 1

Plaid CDN 脚本创建一个全局变量：window.Plaid。但是，您的组件通过 this.Plaid 错误地引用了它。在Vue SFC中，this是组件实例，它只包含自己在组件定义中声明的属性。 this 不包括来自 window.

的全局变量

解决方案是使用window.Plaid:

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

demo

在 VueJS 中从 CDN 加载 Plaid JS

Loading Plaid JS from CDN in VueJS

javascript

vue.js

plaid