v-html content not being rendered correctly

Question

v-html content not being rendered correctly, altohught when I remove v-html in first li it works fine.

Here's my code.

<div>

  <br>
  <li v-html="`a`">
    <ul>
      <li v-html="`c`"> b </li>
    </ul>
  </li>
  <br>

</div>

why 'c' nor 'b' are not being rendered, what am I doing wrong?

Answer 1

v-html renders some given HTML as the content of the tag the v-html directive is used on. You can't use both v-html and child elements and have them work together, the v-html in this instance overrides the child elements.

Answer 2

v-html basically said - keep this element's inner HTML up-to-date with the rawHtml property on the current active instance.

Hence, The contents of the li will be replaced with the value of the rawHtml property passed in the v-html . That's the reason you are not able to see the inner HTML content of li .

Also, No need to use backticks as v-html is a predefined directive by Vue and it will accept the property as a rawHtml.

Live Demo :

 new Vue({ el: '#app', data: { a: '<ul>Render outer li Html</ul>', c: '<ul>Render inner li Html</ul>' } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <li v-html="a"> <ul> <li v-html="c">b</li> </ul> </li> </div>