3

我有一个组件通过输入（文本字段、自定义选择等）处理一些用户数据firstName，例如lastName

有一个 vuex 存储存储这些数据，并且组件字段与之绑定v-model。

我希望这些字段是可编辑的，但是当用户开始编辑其中一个字段时，按钮Save应该Cancel会出现。

单击Save按钮应用更改，单击Cancel应将所有字段恢复到开始编辑之前的状态。

我想知道这项任务是否有任何最佳实践/模式？

4

1 回答 1

1

我不知道这是否是最佳做法，但我可以解释一下我是如何处理类似事情的。我有 2 个属性，formFieldsModified并且formFieldsInitialState.

data() {
    return {
        formFieldsModified: false,
        formFieldsInitialState: {}
    }
}

当组件被安装/创建时，我调用一个名为setFormFieldsInitialState.

created: function () {
    this.$store.dispatch('LOAD_USER').then((item) => {
        this.setFormFieldsInitialState()
    });
}

这是使用 lodash 创建对象的深层克隆，因此我可以与当前user对象进行比较，看看是否有任何变化。

setFormFieldsInitialState() {
    this.formFieldsInitialState = _.cloneDeep(this.user)
    this.formFieldsModified = false;
}

然后你可以观察模型的变化，假设它被称为user.

watch: {
    'user': {
        handler: function (val) {
            this.formFieldsModified = (!_.isEqual(val, this.formFieldsInitialState)) ? true : false;
        },
        deep: true
    }
}

现在，您可以this.formFieldsModified根据是否修改了任何表单字段来切换按钮的可见性。

至于取消/保存操作 - 您将必须有一个不同的方法来实际更新您的商店，因此除非用户单击保存按钮并调度更新商店的操作，否则不会发生任何事情。然后，您可以使用formFieldsInitialState创建的对象将任何值恢复为原来的值。

于 2019-02-06T23:50:03.690 回答