如何在 VueJs 组件中整数 oembed javascript 标签？

Question

我的用户使用“嵌入”字段将简单的 link 转换为丰富的内容 link（link 带有图像、标题、描述等） .

示例：

注意：我使用这个库来获取所有link信息：oscarotero/Embed

如您所见，当您提供 url（例如 Twitter 推文）时，“代码”参数包含 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>

问题出在 VueJs 和脚本标签上。当我的 ajax 调用正常时，我会像这样存储所有嵌入信息：

this.preview = response.embed

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

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

显示html：

脚本标签在代码检查器中可见：

但是脚本没有加载:

我对所有在响应中提供 javascript 标签的 oembed url 都有同样的问题。

注意：如果我尝试直接在组件内部加载脚本，VueJs return 这个错误：

VueCompilerError: Tags with side effect ( and ) are ignored in client component templates

google 上的一个解决方案是使用“mounted”事件，但它与我的上下文不兼容。因为我必须加载的脚本是从 api 接收到的，并且每次都可能不同，具体取决于 link.

Answer 1

有点晚了，但这里有一个选项：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();

如何在 VueJs 组件中整数 oembed javascript 标签？

How to integer an oembed javascript tag inside a VueJs component?

script-tag

oembed

vue.js