Here is the Vue code snippet I'm working with:
export default {
name: 'Test',
data() {
return {
test1: ['1', '2', '3'],
test2: [{
name: 'Hello'
}, {
name: 'Number two'
}, {
name: 'What ever'
}],
};
},
created() {
const first = [...this.test1];
first.forEach((elm, index) => first[index] = 'New');
console.log('first: ', first);
console.log('test1 in data', this.test1);
const second = [...this.test2];
second.forEach(elm => elm.name = 'New');
console.log('second: ', second);
console.log('test2 in data', this.test2);
},
}
After modifying each element of the 'first' array (a copy without reference to 'test1'), all items are updated to 'new'. However, the original value of this.test1 remains unchanged.
A similar process was done for test2. The values were copied and changed to 'New'. Surprisingly, the values in the 'test2' data array have also been updated to 'New' in every item.
This behavior has caught me off guard. Any insights into why this is happening?