nikocraft's avatar

how to send component data as json to server?

this is my setup:

    <template>
        <div id="" style="min-height: 100px">
            <template v-for="(block, index) in blockList">
                <component :is="block"></component>
            </template>
        </div>
    </template>

    <script>
        import TextBlock from './blocks/TextBlock.vue'
        import ImageBlock from './blocks/ImageBlock.vue'

        export default {
            data: function data() {
                return {
                    blockList: ['text-block', 'image-block', 'text-block']
                }
            },

            props: {
                blocks: {type: Array}
            },
            // afterMount () {
            //     this.blocks.push(['text-block']);
            // },
            components: {
                TextBlock,
                ImageBlock
            }
        }
    </script>

    <style lang="scss">

    </style>

So just to test everything is working I added some components manually: blockList: ['text-block', 'image-block', 'text-block']

and everything renders fine on the page. However I will not be manually adding components but I will let user add them and user will be able to add any number of components. There will be more components then currently 2 I am using.

When I have added lets say 10 different components to the page and user presses Save button, how would I go about sending this data to the server? I can't just send blockList array to the server as that is just an array of strings.

What I want to do is to keep a track of all components that have been added and then with a push of button send to server a json with all components and their properties like if I had entered any text into a text component, or if I had uploaded an image into image component, I need all that data to be sent to server as well so I can recreate it when page is later reloaded for edit again.

So how can I do this as blockList: ['text-block', 'image-block', 'text-block'] wont do? How do I keep an array of components and all their properties and with push of button send this to server?

0 likes
0 replies

Please or to participate in this conversation.