Object.assign fails to copy properly

Question

Object.assign fails to copy properly

Currently delving into the world of VueJS.

I have a Method that is designed to take in an Object as its parameter.

In order to avoid modifying the original Object, I make use of Object.assign() to create a clone of it.

Component.vue

export default {
  // ...
  methods: {
    // ...
    activateEditMode (item) {
      this.editItemIndex = this.travelItinerary.indexOf(item)
      this.editItem = Object.assign({}, item)
      // ...
    }
  }
}

The initial Object at this.roteiroCompleto[0]:

https://i.sstatic.net/7md2U.png

However, when I edit the cloned Object labeled as this.itemEditado:

https://i.sstatic.net/i9TP3.png

the changes also reflect on the original Object this.roteiroCompleto[0].

https://i.sstatic.net/H1sHB.png

I've attempted various methods to prevent this binding issue, such as copying each key and value individually, using .slice(), .map(a=>a), yet nothing seems to work. The connection between the two objects remains intact.

Upon executing console.log(this.itemEditado), the following output is generated:

https://i.sstatic.net/DHBbl.png

Interestingly, in another Vue Component utilizing the same approach, everything operates as intended.

javascript vue.js vuejs2

Answer 1

Answer №1

Object.assign creates a shallow copy of keys and values in an object, resulting in references to nested objects or arrays being the same as in the original object.

var x = { a: 10, b: { c: 100 } };
var y = Object.assign({}, x);

y.a = 20;
console.log( x.a, y.a ); // outputs 10 20

y.b.c = 200;
console.log( x.b.c, y.b.c ) // outputs 200 200

To create a deep copy of an object, you can utilize functions like cloneDeep in lodash or resort to methods like

JSON.parse( JSON.stringify( obj ) )

.

It's important to note that the latter method is limited to primitive types supported by JSON.

Answer 2

Object.assign creates a shallow copy of keys and values in an object, resulting in references to nested objects or arrays being the same as in the original object.

var x = { a: 10, b: { c: 100 } };
var y = Object.assign({}, x);

y.a = 20;
console.log( x.a, y.a ); // outputs 10 20

y.b.c = 200;
console.log( x.b.c, y.b.c ) // outputs 200 200

To create a deep copy of an object, you can utilize functions like cloneDeep in lodash or resort to methods like

JSON.parse( JSON.stringify( obj ) )

.

It's important to note that the latter method is limited to primitive types supported by JSON.

Answer 3

Answer №2

When encountering issues with data types in object manipulation, consider the following approach

import * as _ from 'lodash';

To create a deep copy of an object:

newObj = _.cloneDeep(oldObj);

Answer 4

When encountering issues with data types in object manipulation, consider the following approach

import * as _ from 'lodash';

To create a deep copy of an object:

newObj = _.cloneDeep(oldObj);

Answer 5

Answer №3

Reference provided by MDN

 Utilizing Object.assign for deep cloning: Object.assign(this.editItem, JSON.parse(JSON.stringify(item)))

Answer 6

Reference provided by MDN

 Utilizing Object.assign for deep cloning: Object.assign(this.editItem, JSON.parse(JSON.stringify(item)))

Answer 7

Answer №4

If you need to make a deep copy of objects in JavaScript in the year 2022, one option is to utilize the structuredClone method.

By using the global structuredClone() function, you can create a thorough duplicate of a specified value through the structured clone algorithm.

Visit MDN structuredClone() for more information

Answer 8

If you need to make a deep copy of objects in JavaScript in the year 2022, one option is to utilize the structuredClone method.

By using the global structuredClone() function, you can create a thorough duplicate of a specified value through the structured clone algorithm.

Visit MDN structuredClone() for more information

Answer 9

Answer №5

If you don't find it necessary to utilize a library, especially if you're not in need of a deep copy like I was, you can simply achieve the desired result by using the following code:

this.editItem = {...item};

By utilizing the ... operator, you can easily break down the contents of item into its respective keys and values within an object literal (the { }), effectively creating a new object with those key-value pairs.

This approach could potentially be beneficial for individuals who, much like myself, do not require a deep copy. While Object.assign may not work as intended, this method proves to be successful.

Answer 10

If you don't find it necessary to utilize a library, especially if you're not in need of a deep copy like I was, you can simply achieve the desired result by using the following code:

this.editItem = {...item};

By utilizing the ... operator, you can easily break down the contents of item into its respective keys and values within an object literal (the { }), effectively creating a new object with those key-value pairs.

This approach could potentially be beneficial for individuals who, much like myself, do not require a deep copy. While Object.assign may not work as intended, this method proves to be successful.

Object.assign fails to copy properly

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The specified container is not a valid DOM element. (Utilizing Ant Design carousel component in React.js)

Adjust the width of the table to scroll horizontally and size down to fit within the

Kubernetes is incorrectly marking the cron job as completed instead of displaying errors, despite the presence of errors

Utilizing Nuxt JS to leverage injected functions from one plugin within another plugin file

Unexpected behavior observed in JavaScript and AJAX functionality

Utilize a script to cross-reference coordinates received from the client API with those stored in

Conditional rendering is effective for displaying a form item based on certain conditions, but it may not be as effective for

Why am I getting the error "TypeError: Object(...) is not a function" when attempting to integrate Vanilla Tilt with React?

Exploring Angular 5 Nested Loops Using *ngFor and Chunking

Select a checkbox from a dropdown menu

Tips for closing print window dialog during Protractor testing

Tips on how to submit a form with appended information in a separate

I am searching for a tool in ThreeJS that functions similar to AxisHelper, possibly a Helper class or utility

What steps can I take to ensure the legend does not get cropped in angular-google-chart?

What could be causing the issue of rows being undefined?

Tips for extracting a specific segment from a URL string

What could have occurred if you reassigned setInterval to a variable within the useEffect hook?

Using Vue 3 to have the ability to include multiple composable instances in a single script tag

Invoking a C++ dll in the renderer process of a Node.js application with Electron using node ffi

Is it possible to interpret the camera using radius or diameter instead of the traditional x, y, z coordinates