Vue V-Model 改變多個對象

Question

當我在 vue 中使用掛載的 function 在數據區域中分配兩個不同的對象並將其中一個綁定到一個表單時，我遇到了一個奇怪的問題：兩個對象都隨着表單中值的輸入而改變

例子：

<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分配對象時，僅內聯 object price變化與綁定的 object newProduct

我不想， originalProduct的產品被改變了

有人對此有解決方案嗎？

Answer 1

如果要完全隔離更改，則需要對 object 進行深拷貝：

this.newProduct = JSON.parse(JSON.stringify(productFromApi))

Answer 2

分配時，您為 originalProduct 和 newProduct 提供了對 object productFromApi 的引用。 因此，當您修改 productFromApi 時，兩者都會反映出更改。

嘗試像這樣克隆對象：

   this.originalProduct = {...productFromApi}