时间戳

首页 > 解决方案 > 如何在模板标签（或组件）中包含 javascript

javascript - 如何在模板标签（或组件）中包含 javascript

问题描述

我正在尝试做的事情

我需要使用三 (3) 个 javascript 库 [plugin1.js和plugin2.js] 是插件并依赖于base.js

我正在尝试通过<script>如下所示的标记来实现这一点：我这样做是因为我在使用纯 JavaScript 时就是这样做的。

<template>

  <div class="video">
    <script type="application/javascript" :src="`${publicPath}base.js`"></script>
    <script type="application/javascript" :src="`${publicPath}plugin1.js`"></script>
    <script type="application/javascript" :src="`${publicPath}plugin2.js`"></script>
    </script>
...
</template>

问题是什么

存在未定义的错误，例如Uncaught TypeError: blablabla_name is undefined 库未加载到同一范围内。

问题

如何将这些库加载到同一范围内？

标签： javascriptvue.js

解决方案

可以通过将外部脚本添加到组件的 vue mounted() 来解决

<template>
   .... your HTML
</template>

<script>
  export default {
    data: () => ({
      ......data of your component
    }),
    mounted() {
      let recaptchaScript = document.createElement('script')
      recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
      document.head.appendChild(recaptchaScript)
    },
    methods: {
      ......methods of your component
    }
  }
</script>

推荐阅读