vue js - HTML 从纯文本注入到 vue 组件
vue js - HTML injection from plain text into a vue component
我正在努力将一些代码从 ASPX 迁移到 VUE.JS
在以前的系统中存在获取纯文本并将其注入 HTML 的功能（例如带有文本、图像、链接和输入的消息）。
在 VUE 中，注入的 HTML 无法正常工作...
我创建了一个具有根本问题的演示。
基本上我们想将 HTML 注入到像 HTML 这样的 VUE 组件中......并且可以工作。但是在普通的 HTML 里面也包含了 JS 代码。
这是问题的流程：
关于如何解决此问题的一些建议？
纯文本可以有不同的JS函数（可以超过50种不同的场景）
Javascript 没有像那样用注入的代码执行。您可以通过将 console.log('test') 写入 <script> 标记来进行测试。
要解决这个问题，您可以在替换函数之后包含这个小正则表达式函数，它会计算每个脚本标记。
codeBlock.match(/(?<=<script>).*?(?=<\/script>)/gms).forEach(function (match) {
window.eval(match);
});
这里还有一个带有修复程序的演示的分叉版本：
https://codesandbox.io/s/vue-injection-problem-forked-wigzr?file=/src/components/HelloWorld.vue
更好的解决方案是在替换函数之后使用 document.write(codeBlock);。
我正在努力将一些代码从 ASPX 迁移到 VUE.JS
在以前的系统中存在获取纯文本并将其注入 HTML 的功能（例如带有文本、图像、链接和输入的消息）。 在 VUE 中，注入的 HTML 无法正常工作...
我创建了一个具有根本问题的演示。
基本上我们想将 HTML 注入到像 HTML 这样的 VUE 组件中......并且可以工作。但是在普通的 HTML 里面也包含了 JS 代码。
这是问题的流程：
关于如何解决此问题的一些建议？ 纯文本可以有不同的JS函数（可以超过50种不同的场景）
Javascript 没有像那样用注入的代码执行。您可以通过将 console.log('test') 写入 <script> 标记来进行测试。
要解决这个问题，您可以在替换函数之后包含这个小正则表达式函数，它会计算每个脚本标记。
codeBlock.match(/(?<=<script>).*?(?=<\/script>)/gms).forEach(function (match) {
window.eval(match);
});
这里还有一个带有修复程序的演示的分叉版本： https://codesandbox.io/s/vue-injection-problem-forked-wigzr?file=/src/components/HelloWorld.vue
更好的解决方案是在替换函数之后使用 document.write(codeBlock);。