1

目前，我有一个从我的服务器返回的数据对象，该对象使用v-model. 我正在尝试做的是确定是否对从服务器返回的该对象进行了任何更新。

在created()生命周期中，我GET向 API 发出请求以获取服务器数据，然后将其另存为data()组件：

data() {
 return {
   user: {
    name: 'Marcus'
   }
 }
}

v-model然后，我在用于绑定值的组件内部有一个输入：

<input type="text" id="name" v-model="user.name" />

我想要做的是能够判断对象user.name中可能从服务器返回的任何其他键/值对user是否已更改。

我在这里创建了一个示例小提琴。

尝试 1

我的第一个想法是创建某种比较，因为当我user从我的GET请求中成功设置对象以继续并创建一个“默认”对象然后进行比较时：

const hasEdits = JSON.stringify(this.default.user) === JSON.stringify(this.user)

但是，似乎在对输入字段进行任何更新时也会v-model发生变化。user.namedefault.user.name

想法

  • 如何在不v-model更新两个实例的情况下比较这两个对象？
  • 我希望能够创建某种允许我动态创建“已编辑”类型对象的方法，但是当我有嵌套的键/值对时，我不明白如何首先在新的编辑对象，因为它返回未定义。如果我能够解决这个问题，我可以测试编辑的对象是否为真，然后在发送之前使用扩展运算符合并数据与原始返回的对象。
4

1 回答 1

1

要分离备份副本和编辑副本，您可以克隆从服务器返回的对象（取自您的小提琴）：

created() {
    const serverObj = { name: "Marcus" };
    this.user = serverObj;
    this.saved.user = JSON.parse(JSON.stringify(serverObj)); 
}

这将为备份数据创建一个新对象，因此 v-model 绑定不会影响它。我不确定通过将它们序列化为 JSON 来比较它们是否稳定。您可能想在这里寻找替代的深度比较方法。

于 2018-08-14T16:37:53.120 回答