Vue双向数据绑定到Modal组件和道具更新

我是Vue领域的新手，对双向数据绑定的用法有点困惑。这就是我的情况：
我有一个导入<莫代尔>组成部分我正在向该组件传递一个名为documentData的道具，所以<模态：documentData="；文件">
文档是一个包含一些信息的对象，比如"标题"描述"；。

在Modal组件中，我将接收documentData作为道具，这非常好

模态是一个"；编辑"；一个，所以它显示了带有v-model指令的2个文本字段，它也运行得很好

当用户在更改"模式"后；标题"；从"Hello"到"Hello123"的字段点击"；取消"；按钮模型保留"；更新的"；并且正确地不复位

因此，我尝试使用watch将我的输入道具分配到本地数据值中，这样做：

watch: {
is_show: function (newShow) {
if(newShow){
this.localDocumentData = this.documentData
}
},
}

所以当"；is_show"变为true(模式打开(我将把我的documentData道具保存到localDocumentData数据中
然后我在v-model指令中使用localDocumentData，如下所示：

<v-text-field
v-model="localDocumentData.title"
label="Titolo"
outlined
required
dense
:rules="[rules.required]"
></v-text-field>

这也导致了模型的更新，我不明白为什么
有正确的处理方法吗？基本上，我只想对我的Modal组件说：好吧，获取道具值，在本地使用它，但不要更新原始道具，因为用户总是可以点击"；取消"；并关闭编辑模式

非常感谢！！

JavaScript中的对象是引用值，不能简单地使用＝进行复制。这是一种快速而肮脏的深度克隆对象的方法。this.localDocumentData = JSON.parse(JSON.stringify(this.documentData))

相关内容