使用相同的表单进行创建和读取操作

Question

我有一个主人和一个儿童组件.子组件持久保存创建模式和编辑模式的数据.子组件具有如下数据部分,当组件处于创建模式时使用该部分

 data() {
            return {
                title: '',
                description: '',
                organizer: '',
                startdate: '',
                enddate: '',
                email: '',
                phone: ''
            }
        },

我在创建模式下的输入如下

<input type="text" placeholder="enter event title here" class="form-control"  v-model="title">

在编辑模式下,我正在更新客户端上的prop值,如下所示

props:['currentevent']

currentevent的值从主组件传递到子组件,也是当前正在编辑的值.

因此,处理输入值的完整代码如下所示

<input type="text" placeholder="enter event title here" class="form-control" v-if="currentevent" :value="currentevent.title">

<input type="text" placeholder="enter event title here" class="form-control" v-else v-model="title">

在我的保存方法(在子组件中),我正在检查currentevent是否为空.如果它是空的,那么我触发添加代码,否则,我触发更新代码.

问题:这是有效的,但我有一个大的形式,必须为每个组件执行此操作不是一个干净的设计.你能告诉我应该怎么做吗？

Answer 1

我非常感谢你的困境.处理表单数据的最佳方法是使其创建/更新不可知.这是我建议您尝试的内容:

不是将所有数据字段保存为不同的属性,而是将它们包含在单个对象中,在这种情况下,eventObj为了清楚起见,我将其调用:

data () {
    return {
        eventObj: {}
    }
}

然后在你的标记中,你将通过对象引用它们:

<input type="text" placeholder="..." class="form-control" v-model="eventObj.title">

然后,如果您正在编辑,则需要定义一个prop用于从父组件传入数据(作为对象):

props: {
    currentevent: Object
}

然后你只需要将传入的道具映射到子组件的数据:

created() {
    Object.assign(this.eventObj, this.currentevent || {})
}

现在,当处理您的输入时<input v-model="eventObj.title">,如果存在已保存的标题(已传入currentevent),则该字段将预先填充,否则将为空白.

我认为这应该可以帮助您找到解决您想要解决的复杂性的正确方向.这种东西一般涉及其他后勤问题,但我不会无人机.:)