在 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 时，我可以看到脚本标签在那里。

Answer 1

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

解决方案是使用window.Plaid：

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

demo