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