[Vuejs]-V-html content not being rendered correctly

by

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.

👤yoduh

1👍

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>
👤Debug Diva

Leave a comment