When i use the mounted function in vue to assign two different objects in the data area and bind one of them to a form i get a weird problem: Both Objects changes with the input of values in the form
Example:
<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>
In this example the originalProduct changes also when form is edited
When I assign the objects with Object.assign just the inline object price changes with the binded object newProduct
I don't want, that the originalProduct is changed
Does anyone have a solution for this?
You need to make a deep copy of the object if you want to completely isolate the changes:
this.newProduct = JSON.parse(JSON.stringify(productFromApi))
When you the assignments, you're giving both originalProduct and newProduct a reference to the object productFromApi. So when you modify productFromApi, both will reflect the changes.
Try cloning the objects like this:
this.originalProduct = {...productFromApi}