时间戳

首页 > 解决方案 > 如何在 Vue 中使用脚本标签加载第三方元素？

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

问题描述

我正在建立一个网站，并希望显示一个链接到 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>

标签： javascripthtmlvue.jsscript

解决方案

最好<script>使用 JS 将标签插入到您的页面中 - 您可以将类似这样的内容添加到组件的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>

推荐阅读