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

并且一切都在页面上呈现正常。但是，我不会手动添加组件，但我会让用户添加它们，用户将能够添加任意数量的组件。目前我将使用更多的组件。

当我添加了让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将组件绑定到块模型。

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

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

1 个答案: