So kompilieren Vorlage geladen von externen API in Vue

Question

Ich habe eine nicht SPA-Web-App, die Vue Komponenten hat und das funktioniert sehr gut. Ich suche jedoch nach einer Möglichkeit, HTML zu laden, das Vue über externe API enthält.

Also, ich mache einfach einen Anruf zu /ajax/dialogbox/client/add die HTML zurückkehr Vue Komponenten enthält, wie:

<h1>Add client</h1> 
<div>My static content</div> 
<my-component></my-component> 

aber offensichtlich <my-component></my-component> nichts tut. In Angular 1 Ich habe $compile Dienst verwendet, um das HTML vor der Ausgabe zu kompilieren.

Gibt es eine Möglichkeit, das gleiche in Vue zu tun?

Answer 1

In Vue ist ein compile function verfügbar, der Templates zum Rendern von Funktionen kompiliert. Die Verwendung der kompilierten Funktionen erfordert ein wenig mehr Details als Sie angegeben haben (wenn Sie beispielsweise die zurückgegebene Vorlage mit Daten verwenden wollten), aber hier ist ein Beispiel.

console.clear() 
 

 
Vue.component("my-component",{ 
 
    template: `<h1>My Component</h1>` 
 
}) 
 

 
const template = ` 
 
<div> 
 
<h1>Add client</h1> 
 
<div>My static content</div> 
 
<my-component></my-component> 
 
</div> 
 
` 
 

 
new Vue({ 
 
    el: "#app", 
 
    data:{ 
 
    compiled: null 
 
    }, 
 
    mounted(){ 
 
    setTimeout(() => { 
 
     this.compiled = Vue.compile(template) 
 
    }, 500) 
 
    
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script> 
 
<div id="app"> 
 
    <component :is="compiled"></component> 
 
</div>

Beachten Sie, dass in dem Beispiel, ich Ihre Beispielvorlage in einem div Tag enthält. Vue erfordert, dass ein einzelnes Wurzelelement für ein Vue oder eine Komponente vorhanden ist.