Rendering generated JSON HTML Representation to HTML (vue.js — Headless)

currently I am trying to combine NUXT.js with a headless version of KirbyCMS.
Basically the CMS takes the data and puts it into a JSON format.

The data only contains content like Images, Texts, Galleries, Images and so on. (Basically anything from the [Kirby Editor][1].

**My Problem:**
The API gives me the data in a really flat structure, and I don't know how to structure it properly, here is an example.

[{
"attrs": {
"group": "default",
"blockClass": "",
"rowClass": "",
"autoLayout": true,
"images": [{
"filename": "bildschirmfoto-2020-07-26-um-19.10.51.png",
"guid": "/pages/about/files/bildschirmfoto-2020-07-26-um-19.10.51.png",
"altText": "",
"imageClass": ""
}]
},
"content": "",
"id": "_xmyqaklgh",
"type": "gallery"
}, {
"attrs": {
"group": "default",
"images": [{
"filename": "bildschirmfoto-2020-07-27-um-19.34.25.png",
"guid": "/pages/about/files/bildschirmfoto-2020-07-27-um-19.34.25.png",
"altText": "",
"imageClass": ""
}]
},
"content": "",
"id": "_vzbpk4wlg",
"type": "gallery"
}, {
"attrs": [],
"content": "Test",
"id": "_f02i6jix4",
"type": "ul"
}, {
"attrs": {
"indent": 0
},
"content": "Tag 2",
"id": "_8jkbqbmsc",
"type": "ul"
}]

The thing I want to do is render the elements in my vue-Component. The Main problem is, that I cannot group any of the lists, or determine which gallery should group together.

<div v-for="block in data" :key="block.id" class="text--element">
<h1 v-if="block.type == 'h1'">{{ block.content }}</h1>
<h2 v-if="block.type == 'h2'">{{ block.content }}</h2>
<h3 v-if="block.type == 'h3'">{{ block.content }}</h3>
<p v-if="block.type == 'paragraph'">{{ block.content }}</p>
<ul v-if="block.type == 'ul'">
<li> {{ block.content }} </li>
</ul>
</div>

My current approach was to just iterate over the items and displaying it whether the type is correct or not. But this does not seem to be *and feel* right. Has anyone a better idea to solve this?


[1]:

[To see links please register here]