Vue v-html 指令不运行 <script src=".."> 标签

编程问答 2022-05-22

问题描述

我正在尝试创建一个需要支持系统旧模块的 Vue SPA 应用程序。 我想创建向后兼容的组件，它将通过 ajax 请求获取完整的 HTML 模块并将其插入到组件中。

问题是排除的 HTML 包含应包含的相关脚本。 有没有办法通过HTML代码从服务器注入js文件

<template>
  <div class="container" v-html="html"></div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "comp",data() {
    return {
      html: null
    };
  },mounted() {
        fetch('http://localhost:8090/api/html/response')
        .then(response => {
          return response.text();
        })
        .then(data => {
          this.html= data;
        })
  }
};

解决方法

您将无法为此使用 v-html，因为该指令只是设置元素的 innerHTML，它不执行 <script> 标签。

AFAIK，唯一的其他选择是将带有预期来源的 <script> 附加到文档中，因此也许您可以创建一个 API 来获取与标记分离的脚本，然后将它们注入 {{1} }}：

document
ajaxhtmlscriptvue-componentvue.js