v-html content not being rendered correctly-CodePudding

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?

CodePudding user response：

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.

CodePudding user response：

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>