2

I am saving the following information with htmlentities

<i class='fa fa-user'></i>

In my database the information is saved as follows

&lt;i class='fa fa-user'&gt;&lt;/i&gt;

I am receiving this information on my frontend with vue js. Iam using the v-html directive to print.

enter image description here

And what I wanted is o print in html, like for example, when i save without htmlentities

enter image description here

Does anyone know how I could do this on the frontend with vue?
Tom Lima
  • 1,027
  • 1
  • 8
  • 25
  • 3
    Maybe you have to unescape the html entities first https://stackoverflow.com/questions/1912501/unescape-html-entities-in-javascript – arieljuod Jul 17 '20 at 23:24

1 Answers1

1

You have to unescape the string first. Like so:

methods: {
  unescape(string) {

    //create an element with that html
    var e = document.createElement("textarea");
   
    //get the html from the created element
    e.innerHTML = string;

    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}

and refer to it in your template:

<i v-html="unescape(here_your_html)"></span>
Raffobaffo
  • 2,806
  • 9
  • 22