CODEWITHSUNDEEP
javascriptvue.jsnuxt.js
Sammy32
Sammy32

Reputation: 41

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

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?

Upvotes: 3

Views: 1428

Answers (2)

Raffobaffo
Raffobaffo

Reputation: 2856

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!

Upvotes: 2

Kiran Maniya
Kiran Maniya

Reputation: 8979

As your HTML is being loaded from the server, you'll need something like v-runtime-template. Here is the example to start with.

<template>
  <div>
    <v-runtime-template :template="template"/>
  </div>
</template>

<script>
import VRuntimeTemplate from "v-runtime-template";

export default {
  data: () => ({
    template: `
      <app-title>Howdy Yo!</app-title>
      <vue-router to="/croco-fantasy">Go to the croco-fantasy</vue-router>
    `
  }),
};
</script>

v-runtime-template automatically gets the context of the parent component where it’s used and then it uses a dynamic component to let Vue compile and attach. Here is the complete Article about it.

Upvotes: 0

Related Questions