如何将组件数据作为json发送到服务器？

Question

这是我的设置：

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

所以只是为了检验一切工作我手动添加一些组件：黑名单：“文本块”，“图像块”，“文本块”]

和一切呈现在页面上罚款。但是，我不会手动添加组件，但我会让用户添加它们，用户将能够添加任意数量的组件。当前有2个组件会使用更多的组件。

当我添加可以说10个不同的组件到页面和用户按保存按钮，我会怎么去发送这个数据到服务器？我不能只将blockList数组发送到服务器，因为这只是一个字符串数组。

我想要做的是跟踪所有已添加的组件，然后用按钮将所有组件及其属性的属性（如果我已将任何文本输入到文本组件中）发送到服务器的json ，或者如果我已经将图像上传到图像组件中，则需要将所有数据发送到服务器，以便在稍后重新加载页面以供再次编辑时重新创建它。

那么我怎么能做到这一点作为blockList：['文本块'，'图像块'，'文本块']不会做？如何保存一组组件及其所有属性，并按下按钮将其发送给服务器？

Answer 1

构建您的组件以支持v-model。更改blockList数据结构是这个样子：

const blockList = [ 
    { 
    component: "text-block", 
    model: null, 
    label: "Name" 
    }, 
    { 
    component: "text-block", 
    model: null, 
    label: "Address" 
    } 
] 

请注意，每个在blockList的项目现在有一个model你可以用它来从组件收集数据。然后，使用v-model将组件绑定到块模型。

<component v-for="item in blockList" 
      :is="item.component" 
      v-model="item.model" 
      :label="item.label" 
      :key="item"> 
</component> 

下面是一个例子组件实现：

const TextBlock = { 
    props:["value", "label"], 
    template: ` 
    <div> 
     {{label}} 
     <input type="text" @input="$emit('input', $event.target.value)" :value="value"> 
    </div> 
    ` 
} 

现在，在每个blockList元素将包含从该组件收集的数据。如果要保存该数据，请遍历blockList并提取要提交的数据。

这里是working example。

在这个例子中，我没有完成提交数据的工作，你可以自己解决这个问题。我也没有实现ImageBlock组件;无论如何，我不知道你想如何工作。但是遵循相同的模式，您应该能够在ImageBlock组件上支持v-model并以相同的方式提交数据。