When utilizing the mounted function in Vue to assign two different objects in the data area and bind one of them to a form, an unusual issue arises: Both objects change when input values are entered in the form
For 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 scenario, the originalProduct also changes when the form is edited
By using Object.assign to assign the objects, only the nested object price changes with the bound object newProduct
I do not want the originalProduct to be altered
Is there a solution available for this issue?