How Do You Prevent Raw HTML from Rendering in Vue.js

Question

I'm trying to get my Vue.js app to render raw html instead of the code itself.

The code from the server looks like this:

<a href="http://google.com">Google</a>

But when it gets render, the html code get interpreted as text instead of code

<a href="http://google.com">Google</a>

I've tried using v-html, decodeURIComponent, and a filter but no luck:

Is it possible to fetch escaped code from the database and render it as raw html in Vue.js?

Answer 1

Pass it inside a v-html

<span v-html="here_your_html"></span>

update

I see your problem is about escaped content.. Try with a method: unescape(your_html);

like:

<span v-html="unescape(here_your_html)"></span>

and in your methods:

unescaunescapepeS(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;
}

Here a sanbox: https://codesandbox.io/s/hopeful-curran-116fm?file=/src/App.vue

Hope this helps!