这是我的设置：
<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']不会呢？如何保留一组组件及其所有属性，并通过按一下按钮将其发送到服务器？
构建您的组件以提供支持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并提取您要提交的数据。
这是一个工作示例。
在此示例中，我没有完成提交数据的工作，您可能可以自行解决。我也没有实现ImageBlock组件。我不确定您希望它如何工作。但是遵循相同的模式，您应该能够支持v-modelImageBlock组件并以相同的方式提交数据。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句