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

【问题标题】：How can I load a third-party element using a script tag in Vue?如何在 Vue 中使用脚本标签加载第三方元素？
【发布时间】：2021-06-08 12:23:47
【问题描述】：

我正在构建一个网站，并希望显示一个链接到 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 组件中时，我收到以下错误：

模板应该只负责将状态映射到 UI。避免在模板中放置带有副作用的标签，例如，因为它们不会被解析。

我对 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>

【问题讨论】：

可以展示一下你的vue组件代码吗？请记住，在运行 Mounted Lifecycle 挂钩之前，DOM 元素在浏览器中不可用。
@BryceHowitson 更新了问题 - 非常少的 Vue 代码，因为我刚刚更改了它。

标签： javascript html vue.js script

【解决方案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 sn-p 保留在组件模板中：<div id="buzzsprout-large-player-1717833"></div>

【讨论】：