當我在 vue 中使用 mount 函式在資料區域中分配兩個不同的物件并將其中一個物件系結到一個表單時，我遇到了一個奇怪的問題：兩個物件都隨著表單中值的輸入而變化
例子：
<template>
<v-card>
<v-form>
<v-text-field
v-model="newProduct.name"
></v-text-field>
<v-text-field
v-model="newProduct.price.net"
></v-text-field>
</v-form>
</v-card>
</template>
<script>
export default {
data() {
return {
originalProduct: {}
newProduct:{}
}
},
mounted () {
const productFromApi = {
name: 'test'
price: {
net:20
}
}
this.originalProduct = productFromApi
this.newProduct = productFromApi
}
}
</script>
在此示例中，originalProduct編輯表單時也會發生變化
當我Object.assign僅使用行內物件分配物件時price，系結物件會發生變化newProduct
我不想要，originalProduct改變了
有人對此有解決方案嗎？
uj5u.com熱心網友回復：
如果要完全隔離更改，則需要制作物件的深層副本：
this.newProduct = JSON.parse(JSON.stringify(productFromApi))
uj5u.com熱心網友回復：
當你分配時，你給 originalProduct 和 newProduct 一個對物件 productFromApi 的參考。因此，當您修改 productFromApi 時，兩者都會反映更改。
嘗試像這樣克隆物件：
this.originalProduct = {...productFromApi}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/438566.html
標籤：javascript Vue.js 目的