Vue V-Model changes multiple Objects

Question

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?

Answer 1

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}