如何在 Vue 中使用脚本标签加载第三方元素？

Question

我正在构建一个网站并希望显示一个链接到 BuzzSprout 播客的小部件。我在尝试设计时使用 HTML 构建了网站，现在正尝试将其转换为 VueJS。

仅在 HTML 中，这是显示小部件的元素和脚本标记：

    <div id="buzzsprout-large-player-1717833"></div>
    <script
      type="text/javascript"
      charset="utf-8"
      src="https://www.buzzsprout.com/1717833.js?container_id=buzzsprout-large-player-1717833&amp;player=large"
    ></script>

当我尝试将其包装到 Vue 组件中时，出现以下错误：

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.

我是 Vue 的新手，所以我很可能只是错过了一些关于如何设置它的东西。

任何人都可以指导我如何重新排列它以成功呈现小部件吗？

谢谢，马克

编辑

Widget.vue 的完整组件代码：

<template>
  <div class="episodeWidget">
    <div class="page-heading">
      <h1>Episodes</h1>
    </div>
    <p>
      <strong>
        Here you'll find everything that we've got to show for our efforts. A
        pantheon of admittedly mediocre content.
      </strong>
    </p>
    <p>Just pick an episode of your choice and hit play!</p>
    <!--<div id="buzzsprout-large-player-1717833"></div>
    <script
      type="text/javascript"
      charset="utf-8"
      src="https://www.buzzsprout.com/1717833.js?container_id=buzzsprout-large-player-1717833&amp;player=large"
    ></script>-->
  </div>
</template>

<script>
export default {
  name: "EpisodeWidget",
  props: {
    msg: String,
  },
};
</script>

Answer 1

最好使用 JS 将 <script> 标记插入您的页面 - 您可以将类似这样的内容添加到组件的 created() 挂钩中，例如：

const scriptTag = document.createElement('script');
scriptTag.src = 'https://www.buzzsprout.com/1717833.js?container_id=buzzsprout-large-player-1717833&amp;player=large';
scriptTag.setAttribute('charset', 'utf-8');
document.head.appendChild(scriptTag);

您可以在组件模板中保留 HTML 片段：<div id="buzzsprout-large-player-1717833"></div>

如何在 Vue 中使用脚本标签加载第三方元素？

How can I load a third-party element using a script tag in Vue?

html

javascript

vue.js

script