CODEWITHSUNDEEP
vue.js
rv4
rv4

Reputation: 79

v-html not rendering vue component in Vue 2

I am trying render a component using props. But only works when content props is not a component.

Here is an example: https://jsfiddle.net/eugenio4/onf54vt5/

// register modal component
Vue.component('component', {
  template: '<span class="component-tag">This is component</span>',
})

// start app
new Vue({
  el: '#app',
  data: function (){
    return {
        test1 : '<label>this is label</label>',
        test2 : '<component></component>' //this doest work
    }
  }
})

<!-- app -->
<div id="app">  
  <span v-html="test1"></span>
  <span v-html="test2"></span>
</div>

Is this possible?

Upvotes: 2

Views: 6230

Answers (1)

Saurabh
Saurabh

Reputation: 73609

No, You can not do this using v-html, as documentation clearly points out:

Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates.

The contents are inserted as plain HTML - data bindings/vue components are ignored. Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.

Upvotes: 8

Related Questions