Как рендерить рекурсивный вызов компонета Vue?

Question

[ak_wi]

Хочется сделать вывод сохраненных в JSON блоков из бутстрапа, с простой вложенностью вида:

blocks: [
                    {
                        id: 1,
                        blockType: 'row',
                        classes: {
                            base: 12,
                            sm: 12,
                            md: 12,
                            lg: 12,
                            xl: 12,
                        },
                        blocks: [
                            {
                                id: 2,
                                blockType: 'col',
                                classes: {
                                    base: 6,
                                    sm: 5,
                                    md: 4,
                                    lg: 3,
                                    xl: 2,
                                },
                                content: {
                                    text: 'Блок 1'
                                },

                            },
                            {
                                id: 3,
                                blockType: 'col',
                                classes: {
                                    base: 6,
                                    sm: 5,
                                    md: 4,
                                    lg: 3,
                                    xl: 2,
                                },
                                content: {
                                    text: 'Блок 2'
                                },
                            }
                        ]
                    },

Есть компонент - родитель, который передает эти блоки дочернему:

<template>
    <div class="container">
        <BlockRender :items="blocks"></BlockRender>
    </div>
</template>

Дочерний компонент выглядит вот так:

<template>
    <div v-for="col in items" v-bind:key="col.id" v-bind:class="getBlockClass(col)">
        <template v-if="col.content">{{col.content.text}}</template>
        <BlockRender
                v-if="col.blocks && col.blocks.length"
                :items="col.blocks"
        ></BlockRender>
    </div>
</template>

<script>
    export default {
        name: 'BlockRender',
        props: {
            items: Array
        },

        methods: {
            getBlockClass: function (col) {},
        },
    }
</script>

Проблема в том, что внутри <template> должен быть один элемент. А добавление еще div в такой вложенности ломает дерево. Как сделать вывод такой структуры неограниченной вложенности без лишних блоков?

Comments

[Дмитрий Беляев]

конкретно на vue - никак, только оборачивать в еще 1 div

[ak_wi]

Дмитрий Беляев, т.е. по-другому никак такую вложенность нельзя рендерить?

[Дмитрий Беляев]

ak_wi, на vue нет, придется стилями решать вопрос

Answer 1

[Андрей Пастухов]

Можете воспользоваться компонентов vue-fragment

Тогда можно будет делать так

<template>
    <fragment v-for="col in items" v-bind:key="col.id">
        <template v-if="col.content">{{col.content.text}}</template>
        <BlockRender
                v-if="col.blocks && col.blocks.length"
                :items="col.blocks"
        ></BlockRender>
    </fragment>
</template>