如何对VueJs组件内的javascript标记进行整数处理？

问题描述

我的用户有一个“嵌入”字段，用于将简单链接转换为丰富的内容链接（带有图像，标题，描述等的链接）。

示例：

注意：我使用此库来获取所有链接信息：oscarotero/Embed

如您所见，当您提供网址（例如Twitter推文）时，“ code”参数包含HTML 和脚本标签，以包含在我的前端：

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">I am so hopelessly in love with <a href="https://twitter.com/ChucklefishLTD?ref_src=twsrc%5Etfw">@ChucklefishLTD</a> ‘s spooky logo <a href="https://twitter.com/TomJamesSlade/status/1315781356023173120">pic.twitter.com/2KtjCNOOUl</a></p>&mdash; Tom Slayed ?? (@TomJamesSlade) <a href="https://twitter.com/TomJamesSlade/status/1315781356023173120?ref_src=twsrc%5Etfw">October 12,2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

问题出在VueJ和script标签上。当我的ajax调用正常时，我将存储所有嵌入信息，例如：

this.preview = response.embed

在我的组件内部，显示带有“ v-html” VueJs指令的html代码

<div v-if="preview['code']" v-html="preview['code']"></div>

显示html

脚本标记在代码检查器内部可见：

但是脚本未加载：

我在响应中提供了javascript标签的所有url URL都存在相同的问题。

注意：如果我尝试直接在组件内部加载脚本，则VueJs将返回此错误：

VueCompilerError：客户端组件模板中会忽略具有副作用（和）的标签

Google上的一种解决方案是使用“挂载”事件，但它与我的上下文不兼容。 因为我必须加载的脚本是从api接收的，并且每次都可能因链接而有所不同。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）