Question

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

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

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

然后，我在组件内部使用了v-model来绑定值的输入：

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

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

我已经创建了example fiddle here。

尝试1

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

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

但是，在对输入字段进行任何更新时，v-model也会同时更改user.name和default.user.name。

想法

如何在不v-model更新两个实例的情况下比较这两个对象？
我希望能够创建某种方法，使我能够动态创建“已编辑”类型的对象，但是当我嵌套了键/值对时，我不知道如何首先创建必要的结构在新的已编辑对象中，因为它返回未定义。如果能够解决此问题，我可以测试已编辑的对象是否正确，然后使用散布运算符合并数据，然后再与原始返回的对象进行发送。

Answer 1

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

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

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