Vue v-html directive does not run <script src=".."> tags

user_7868384 0
Viewed 796

I'm trying to create a Vue SPA app which needs to support old modules of the system. I want to create backward-compatible components which will get a full HTML module through an ajax request and insert it inside the component.

The problem is the excepted HTML contains relevant scripts that should be included. is there any option to inject js files from the server through HTML code

<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;
        })
  }
};
script vue-component vue.js html ajax
1 Answers

You won't be able to use v-html for this because the directive simply sets an element's innerHTML, which does not execute <script> tags.

AFAIK, the only other option is to append to the document a <script> with the intended source, so perhaps you could create an API to fetch the scripts separate from the markup, then inject them into the document:

export default {
  mounted() {
    fetch('http://localhost:8090/api/js/response')
        .then(response => {
          return response.json();
        })
        .then(scriptUrls => {
          for (const url of scriptUrls) {
            const scriptEl = document.createElement('script');
            scriptEl.src = url;
            document.body.appendChild(scriptEl);
          }
        })
}
user_62771510
Related