如何对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接收的，并且每次都可能因链接而有所不同。

解决方法

有点晚了，但这里有一个选项：api 为您提供了不发送脚本标记的可能性，因此您可以在之前将它自己包含在 html 中。在 url 中添加一个 omit_script=true 并且它在结果中消失了。

然后你就可以插入推特块了。也许您必须调用 twttr.widgets.load() 来初始化推文。

编辑：由于您正在使用该插件，这应该可以正常工作

$embed = new Embed();

$result = $embed->get('https://www.instagram.com/p/B_C0wheCa4V/');
$result->setSettings([
    'oembed:query_parameters' => ['omit_script' => true]
]);
$oembed = $info->getOEmbed();

oembed script-tag vue.js