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?
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!
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.
