konvertieren string zu Dom in vuejs

Question

vor kurzem möchte ich ein stirng zu Dom in einer vue-komponente konvertieren, aber es funktioniert nicht so wie ich es erwarte. Mein Code sieht wie folgt aus:

// what I wrote in the template 
    <div id="log"> 
     {{libText}} 
    </div> 

    // what I wrote in js 
     Vue.component(... , { 
     template: ... , 
     data: function() { 
       return ...  
      } 
     }, 
     computed: {   
      libText:function(){ 
       var str="<p>some html</p>"; 
       var div = document.createElement('div'); 
       div.innerHTML = str; 
       return div; 
      } 
     }, 
     methods:{...} 
     }) 

Das Ergebnis, das ich bekommen, ist eine Zeichenfolge "[object HTMLDivElement]" eher als ein Dom. Es wäre großartig, wenn mir jemand helfen könnte, dieses Problem zu lösen

Answer 1

Eine mögliche Lösung ist:

Vorlage:

<div id="log"> 
    {{{libText}}} 
</div> 

Hinweis Tripel {} für rohe html/Textinterpretation zu bekommen.

Javascript:

Vue.component(... , { 
    template: ... , 
    data: function() { 
      return ...  
     } 
    }, 
    computed: {   
     libText:function(){ 
      // return directly html 
      var str="<div><p>some html</p></div>"; 
      return str; 
     } 
    }, 
    methods:{...} 
}); 

Answer 2

Was Sie versuchen, macht keinen Sinn. So funktionieren die Schnurrbärte nicht. Sie geben nur Zeichenfolgen aus. Kein Wunder, dass Ihre Ausgabe eine Zeichenfolge ist.

Wenn Sie eine neue Komponente erstellen möchten, benötigen Sie einen Konstruktor AND ein DOM-Element, nach der folgenden Gleichung.

DOM el + VueComponent constructor = Vue Component 

Sie sollten den Konstruktor in einigen Haken (Vue.extend), zum Beispiel die erstellte Haken zusammenstellen. Dann erstelle das Element genau wie du. Dann etwas tun wie:

var myComponent = new myConstructor({el: myElement}) 

Und voila 'du bist fertig!

Answer 3

Wenn Sie Vue 2 verwenden, verwenden Sie die v-html Richtlinie:

<div v-html="yourVariable"></div> 

https://vuejs.org/v2/api/#v-html