1

目前我正在尝试将 NUXT.js 与无头版本的 KirbyCMS 结合起来。基本上，CMS 获取数据并将其转换为 JSON 格式。

数据仅包含图像、文本、画廊、图像等内容。（基本上来自柯比编辑器的任何内容。

我的问题： API 为我提供了一个非常扁平结构的数据，我不知道如何正确构建它，这是一个示例。

[{
    "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"
}]

我想要做的是渲染我的 vue-Component 中的元素。主要问题是，我无法对任何列表进行分组，也无法确定应该将哪个画廊组合在一起。

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

我目前的方法是迭代项目并显示类型是否正确。但这似乎并不正确。有没有人有更好的主意来解决这个问题？

4

0 回答 0