HTML Tag in Array Value

Question

The Requirement is to append an HTML element from Array Value to DOM

template: {
    0: {
       h1: '<h1>Hi</h1>'
    },
    1: {
       h2: '<h2>Hi</h2>'
    },
    2: {
       h3: '<h3>Hi</h3>'
    }
}

I have a VueJS For Loop :

        <div v-for="temp in template">
            {{ temp.h1}}
        </div>

DOM :

<h1>hi</h1>

Answer 1

I think you need to use v-html binding to inject raw html in page.

Something like this:

<div v-for="temp in template">
    <div v-html="temp.h1">
</div>