[Vuejs]-HTML characters are not transalated during render

by

0👍

✅

When rendering an HTML entity, it may need to be compiled. You can use one of these options:

  • Interpolation

<p> didn{{ `&#039;` }}t project a significant increase</p>

  • v-html

<p> didn<span v-html="`&#039;`"></span>t project a significant increase</p>

Note that these first two examples are using a template literal, not single quotes.

  • Render function

If using a render function, you can set the innerHTML domProps:

render(h) {
  return h('span', {
    domProps: {
      innerHTML: 'didn&#039;t project a significant increase'
    }
  });
}

Here is a demo

Original

You’re missing an &, it should be:

<p> didn&#039;t project a significant increase</p>

0👍

In my specific situation. I ended. up solving the problem by using the he HTML encoder/deccoder https://www.npmjs.com/package/he to decode the HTML before rendering.

Leave a comment