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

并在我的save方法中（在子组件中），我正在检查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传递），则该字段将预先填充，否则将为空白。

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

Answer 2

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

执行此操作的一种方法是将观察者放在道具上，每当道具发生变化时，更新局部变量并仅在表格中使用这些变量。

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

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

2 个答案: