使用相同的形式进行创建和读取操作

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

当前事件的值正在从主组件传递到子组件，也是当前正在编辑的值。

所以，处理输入值的完整代码如下所示

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

然后你只需要将传入的 prop 映射到子组件的数据：

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

现在，当您的输入（如<input v-model="eventObj.title">）被处理时，如果有一个保存的标题（使用currentevent 传入），该字段将预先填充它，否则它将是空白的。

我认为这应该可以帮助您朝着正确的方向解决您要解决的复杂问题。一般来说，这类东西还涉及其他后勤问题，但我不会继续讨论。 :)

Answer 2

我看到的问题是您想删除表单中的 v-if/else。我建议在这里保持孩子的本地数据与传递的道具同步，并且只在表单中使用局部变量。

这样做的一种方法是在 props 上放置一个观察者，每当 props 发生变化时，更新局部变量并仅在表单中使用这些变量。

watch: {
   currentevent: function(newVal){
      title =  newVal.title,\
      description = newVal.description
      ...
   }
}