我正在建立一个网站,并希望显示一个链接到 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&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&player=large"
></script>-->
</div>
</template>
<script>
export default {
name: "EpisodeWidget",
props: {
msg: String,
},
};
</script>