Vue - How to render HTML in vue components
Look at the below snippet -
Note - You can't render html
inside {{ }}
because it get added to text node of the element. To render it as an html you need to use v-html
and have your function which return element
wrapping your text
new Vue({ el: "#app", data: { foo: 'asdasd' }, methods: { span(text) { return `<span> ${text} </span>` } }})
span { color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app"> <h1> Render whatever you want </h1> <div v-html="span('Hello world')" /> </div>