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

Question

我有一个母版和一个 child 组件。 child 组件保留创建模式和编辑模式的数据。 child 有一个数据部分如下，当组件处于创建模式时使用它

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

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

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

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

并且在我的保存方法中（在 child 组件中），我正在检查 currentevent 是否为空。如果它是空的，那么我触发添加代码，否则我触发更新代码。

问题：这行得通，但是我有一个很大的表单并且必须为每个组件都这样做不是一个干净的设计。你能告诉我我应该做什么吗？

Answer 1

我非常理解你的困境。处理表单数据的最佳方式是使其 create/update 不可知。以下是我建议您尝试的方法：

与其将所有数据字段作为不同的属性维护，不如将它们包含在一个 object 中，在这种情况下，为了清楚起见，我将其称为 eventObj：

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

然后在您的标记中，您将通过 object:

引用它们

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

然后，如果您正在编辑，则需要定义一个用于从 parent 组件传递数据的道具（作为 object）：

props: {
    currentevent: Object
}

然后你只需要将传入的属性映射到 child 组件的数据：

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

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

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

Answer 2

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

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

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

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

use the same form for create and read operation

vue.js

vue-component

vuejs2