vue.js - 如何将组件数据作为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>

为了测试一切正常，我手动添加了一些组件:blockList: ['text-block', 'image-block', 'text-block']

并且页面上的所有内容都呈现良好。但是我不会手动添加组件，但我会让用户添加它们，用户将能够添加任意数量的组件。将会有比目前我正在使用的 2 个更多的组件。

当我向页面添加 10 个不同的组件并且用户按下“保存”按钮时，我将如何将这些数据发送到服务器？我不能只将 blockList 数组发送到服务器，因为它只是一个字符串数组。

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

那么我怎么能像 blockList: ['text-block', 'image-block', 'text-block'] 那样做呢？如何保留一组组件及其所有属性，并通过按下按钮将其发送到服务器？

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 将您的组件绑定(bind)到 block 模型。

<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 并以相同的方式提交数据。