VueJS pushing to an array also pushes the value to another one

Question

Has any vuejs veteran experience this on VueJS(v2) where you have 2 arrays on a Component, and you push a value to the 1st array and the 2nd array gets the value also WITHOUT TOUCHING IT.

This is the first time I've encountered this, fyi I've been using VueJS for more than 2yrs already.

Additional information I have a VERY VERY similar component with exactly the same data variables and it doesn't happen, only on the 2nd Component.

array1 = [];
array2 = [];

array1.push('gether');

output should be

array1 = ['gether'];
array2 = [];

WHAT ACTUALLY HAPPENS

array1 = ['gether'];
array2 = ['gether'];

I've also played with the Google DevTools Vue Debugger.

Adding an entry on the array1 ONLY also adds the value on the array2.

kinda mind boggling

Are you able to replicate the problem in a CodeSandbox or similar? — Lars
– Lars, Commented Jun 30, 2021 at 17:21
@Lars I haven't tried it yet, but it seems like it happens when I assign the same value to array1 and array2, THEN I added an entry to array1 and then array2 also gets the value magically and vice versa when I add entry to array2, array1 gets the value magically too. — Skeeith22
– Skeeith22, Commented Jun 30, 2021 at 17:24
Can you add some more code ? I think you are coping the array1 to array2 ... Checkout this js fiddle — Sanmeet
– Sanmeet, Commented Jun 30, 2021 at 17:30
@Sanmeet Apparrenly my code is way too complicated to be replicated on a codesandbox, but someone has answered my question and it is exactly what is happening. — Skeeith22
– Skeeith22, Commented Jun 30, 2021 at 17:45
@Skeeith22 checkout the answer it also something I experienced in past so I just wanted to see if you are creating arrays or copying ! — Sanmeet
– Sanmeet, Commented Jun 30, 2021 at 17:46

Sanmeet · Accepted Answer · 2021-06-30 17:42:34Z

Because arrays in JS are reference values, so when you try to copy it using the = it will only copy the reference to the original array and not the value of the array. To create a real copy of an array, you need to copy over the value of the array under a new value variable. That way this new array does not reference to the old array address in memory.

To achieve this you can use array.slice() method as it creates a new array not a mere reference !

See Example and understand difference =>

Using reference (=)

let array = ["some text"]

// Making it equal to main array  and using reference to copy 
array1 = array;
array2 = array;

array1.push('gether');
console.log(array2)

Using array.slice() to clone

let array = ["some text"]

// Making it equal to main array and using slice to copy 
array1 = array.slice(); 
array2 = array.slice();

array1.push('gether');

console.log(array2)

Lars · Accepted Answer · 2021-08-18 07:57:56Z

1

When you make two arrays equal to the same value, you make them equal by reference. So

foo = ['a', 'b', 'z']

array1 = foo;
array2 = foo;

array1.push('d');

console.log(array2) //Outputs: ['a', 'b', 'c', 'd']

Is expected behaviour.

However that is not the same as the given example in your question. Run snippet below to see the difference.

To avoid this, you can use slice() to create a copy of the original array. I added an example to the code snippet.

let foo = ["a", "b"];

let array1 = foo;
let array2 = foo;

array2.push("c");

console.log(foo); // Outputs ["a", "b", "c"]
console.log(array1); // Outputs ["a", "b", "c"]

let array3 = [];
let array4 = [];

array4.push("a");

console.log(array3); // Outputs []
console.log(array4); // Outputs ["a"]

let bar = ["a", "b"];

let array5 = bar.slice();

bar.push("c");

console.log(bar); // Outputs ["a", "b", "c"]
console.log(array5); // Outputs ["a", "b"]

edited Aug 18, 2021 at 7:57

answered Jun 30, 2021 at 17:33

Lars

7985 silver badges21 bronze badges

3 Comments

Skeeith22 Over a year ago

Actually this is what is happening, it is exactly what you mentioned. I've assigned exactly the same values on both arrays.

Skeeith22 Over a year ago

How can I make it so that it won't reflect on the other array? is there a way or something?

Lars Over a year ago

@Skeeith22 i added a solution to the answer.

Collectives™ on Stack Overflow

VueJS pushing to an array also pushes the value to another one

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related