Estoy tratando de crear una aplicación Vue SPA que necesita admitir módulos antiguos del sistema. Quiero crear componentes compatibles con versiones anteriores que obtendrán un módulo HTML completo a través de una solicitud ajax e insertarlo dentro del componente.
El problema es que el HTML exceptuado contiene secuencias de comandos relevantes que deben incluirse. ¿Hay alguna opción para inyectar archivos js desde el servidor a través del código HTML?
<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; }) } };No podrá usar v-html para esto porque la directiva simplemente establece el HTML innerHTML de un elemento, que no ejecuta las etiquetas <script> .
AFAIK, la única otra opción es agregar al documento un <script> con la fuente prevista, por lo que tal vez podría crear una API para obtener los scripts separados del marcado, luego inyectarlos en el 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); } }) }