vue-html don't print with html entities format

user_11380315 0
Viewed 199

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?
vue.js html-entities
1 Answers

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>
user_76290200
Related