How to render a recursive call to a Vue component?

Question

Vue.js

I would like to output the blocks saved in JSON from the bootstrap, with a simple nesting of the form:

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'
                                },
                            }
                        ]
                    },

There is a parent component that passes these blocks to the child:

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

The child component looks like this:

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

The problem is that there <template>must be one element inside. And adding another div in such a nesting breaks the tree. How to output such a structure of unlimited nesting without extra blocks?

Answer 1

You can use the vue-fragment components
Then you can do this

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