Используйте значение JSON в качестве HTML-тега с vue

Question

У меня есть файл JSON, выводящий следующие стили:

{
"h1" : {
    "font-family" : "Lato",
    "font-size" : "24px",
    "line-height" : "28px",
    "font-weight" : 600,
    "colorId" : 3,
    "margin-bottom" : "10px",
    "margin-top" : "20px"
},
"h2" : {
    "font-family" : "Lato",
    "font-size" : "20px",
    "line-height" : "24px",
    "font-weight" : 600,
    "colorId" : 3,
    "margin-bottom" : "10px",
    "margin-top" : "20px"
}

}

Я хочу использовать первый ключ "h1, h2, ..." как тег HTML для его отображения. Возможно ли это с помощью Vue?

Это должно быть примерно так:

<div v-for="(props, tag) in headers">
    <{{ tag }}>x</ {{ tag }}>
</div>

Answer 1

<div v-for="(props, tag) in headers" v-html="`<${tag}>x</${tag}>`"></div>