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?
Please or to participate in this conversation.