我有一个通过输入(文本字段、自定义选择等)处理一些用户数据的组件,如firstName
、lastName
等。
有一个vuex存储器存储这些数据,组件字段通过v-model
绑定到它。
我希望这些字段是可编辑的,但当用户开始编辑其中一个字段时,按钮Save
和Cancel
应该出现。
点击Save
按钮应用变更,点击Cancel
应将所有字段恢复到编辑开始前的状态。
我想知道对于这项任务是否有任何最佳实践/模式?
我有一个通过输入(文本字段、自定义选择等)处理一些用户数据的组件,如firstName
、lastName
等。
有一个vuex存储器存储这些数据,组件字段通过v-model
绑定到它。
我希望这些字段是可编辑的,但当用户开始编辑其中一个字段时,按钮Save
和Cancel
应该出现。
点击Save
按钮应用变更,点击Cancel
应将所有字段恢复到编辑开始前的状态。
我想知道对于这项任务是否有任何最佳实践/模式?
2条答案
按热度按时间vuv7lop31#
我不知道这是否是最佳实践,但我可以解释一下我是如何处理类似的问题的,我有两个属性,
formFieldsModified
和formFieldsInitialState
。当安装/创建组件时,我调用一个名为
setFormFieldsInitialState
的方法。这是在使用lodash创建对象的深度克隆,这样我就可以与当前的
user
对象进行比较,看看是否有任何变化。然后,您可以观察模型的变化,假设它名为
user
。现在,您可以使用
this.formFieldsModified
来切换按钮的可见性,这取决于是否修改了任何表单字段。至于cancel/保存操作--你必须有一个不同的方法来实际更新你的存储,所以除非用户点击save按钮并分派一个更新存储的操作,否则什么都不会发生,然后你可以使用创建的
formFieldsInitialState
对象将任何值恢复到它们最初的样子。oxcyiej72#
我曾经用这种方法处理我的组件,但是我开始认为复杂性可能在于这种方法可能混淆了关注点。我今天面临着一个类似的问题,一个组件正在跟踪一个多选复选框。我认为也许 * 子组件 * 应该是哑的--呈现选项和通信选择。然后不管是什么在管理数据(在您的例子中是vuex,在我的例子中是父组件)应该决定业务规则如何处理该数据。
所以我的解决方案与Charlie的类似,但不是让子组件在挂载时将数据复制到临时/初始状态;您的vuex(在我的例子中是我的父组件)将管理两个数据集(formFieldsSaved和formFieldsWorking),并负责提交工作集以覆盖某个操作的Saved值。我认为从概念上讲,这可能是一种更干净的方法,它通过能够避免安装和创建隐藏v模型属性的数据属性而得到加强。
对比
这只是我目前的做法。我想我会把它作为一个替代品。但我很有兴趣看看其他开发人员的想法,因为这是一个常见的情况。