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

我有一个主组件和一个子组件。子组件保存创建模式的数据以及编辑模式。孩子有一个数据段如下当组件是正在使用创建模式使用相同的表单进行创建和读取操作

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

和我的创造模式是如下

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

在编辑模式下输入，我更新在客户端上的道具值如下，其是

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为空。如果它是空的，那么我触发添加代码，否则触发更新代码。

问题：这是有效的，但我有一个很大的形式，必须为每一个组件做这件事都不是一个干净的设计。你可以让我知道我应该做什么？

来源

2016-12-19 Gagan

我完全赞赏你的困境。处理表单数据的最佳方式是使其创建/更新不可知。下面是我建议你试试：

而是保持所有数据字段的不同属性，包含他们在一个单一的对象，在这种情况下，我称它eventObj为清楚：

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

然后在你标记你通过对象引用它们：

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

那么你需要定义一个道具从父组件的数据传递（作为一个对象），如果您正在编辑：

props: { 
    currentevent: Object 
}

然后你只需要输入的道具映射到子组件的数据：当你的输入，比如<input v-model="eventObj.title">处理

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

现在，如果有保存的标题（中传递与currentevent）该字段将被预填充它，否则它将是空白的。

我认为这应该可以帮助你朝着正确的方向去解决你想要解决的复杂问题。一般来说，这类东西还涉及其他后勤问题，但我不会无人驾驶。 :)

来源

2016-12-19 03:32:58

谢谢@rommel ..它的工作..再次感谢！ :) – Gagan

@Rommel桑托尔，似乎你掌握vue.js.我需要你的帮助。看看这里：http://stackoverflow.com/questions/41843823/how-to-display-button-link-with-vue-js –

我看到的问题是你想删除窗体中的v-if/else。我会在这里推荐的是保持您的本地孩子数据与传递的道具同步，并且只使用局部变量形式。

这样做的一种方式可以放在道具上的观察者，并且每当道具改变时，更新局部变量并仅在表单中使用这些变量。

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

来源

2016-12-19 03:59:55 Saurabh

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

回答

相关问题