vuejs copying data object and removing property will remove the property from original object as well

Question

I have a data object in vue that looks like this

rows[
0 {
  title: \"my title\",
  post: \"my post text\",
  public: false,
  info: \"some info\"
},
1 {
 title:         


        

Answer 1

it is because row is reference type and postData is pointing to same reference as row. To copy without reference (deep copy) you can use Object.assign if your object/array contains only value type ( like number, string , boolean etc) not reference type like Object or Array. If your Object contains reference type like object containing object then internal copied object will be reference type.

Example 1:

var user = {
name: "abc",
address: "cde"
};

var copiedUser = Object.assign({}, user); 

it copies properties from user. So user and copiedUser are different object because user contains only value types

Example 2:

var user = {
name: "abc",
address: "cde",
other_info: { // reference type
   country: "india"
}

};

var copiedUser = Object.assign({}, user); 

Now it copies all properties from user but user contains other_info that is reference type(object). so changing copiedUser properties which are value type will not affect user but changing other_info of copiedUser or user will affect each other.

copiedUser.name ="new name"; // will not reflect in user

copiedUser .other_info.country = "new country"; // will reflect in user also

So Object.assign will copy to one level. If your object contains nested object or array you need to iterate and copy till last level.

Object.assign takes {} as well as [] also. so you can return array also.

eg:var copiedArray= Object.assign([], [1,3,4,5]);

So for your case I think you need to iterate your array till object then copy and push them in another array;

var rows = [
 {
  title: "my title",
  post: "my post text",
  public: false,
  info: "some info"
},
{
 title: "my title",
  post: "my post text",
  public: true,
  info: "some info"
},
 {
 title: "my title",
  post: "my post text",
  public: false,
  info: "some info"
}
];

var postData = [];

for(var i=0;i<rows.length;i++) {
postData.push(Object.assign({}, rows[i]));
}

Answer 2

You need to take a copy of your data by cloning it. There are various ways of cloning the data, I would recommend using lodash's function, cloneDeep

postDataCopy = _.cloneDeep(postData)

Then you can modify postDataCopy as you like without modifying the original.

Answer 3

Reactivity is caused by Observer _proto inside each object and array.

You can use the following object util as mixin if needed to remove ovservable hatch from each object.

const isEmpty = (value) => {

if (!value) return false;

if (Array.isArray(value)) return Boolean(value.length);

return value ? Boolean(Object.keys(value).length) : false;

};

const isNotEmpty = value => isEmpty(value);

const clone = (value) => {

if (!value) return value;

const isObject = (typeof value === 'object');

const isArray = Array.isArray(value);

if (!isObject && !isArray) return value;

// Removing reference of Array of values

if (isArray) return [...value.map(val => clone(val))];

if (isObject) return { ...value };

return value;

};

const merge = (parent, values) => ({ ...parent, ...values });

export {

isEmpty,

isNotEmpty,

clone,

merge

};

And in store getters .

import { clone } from '@/utils/object';

const getData = state => clone(state.data);
export default {
   getData
}

Answer 4

this is because in javascript objects are copied-by-reference which means though you are changing postData which actually is referencing to original address that holds the data i.e. rows. you can do this

postData = JSON.parse(JSON.stringify(rows))

Answer 5

You need to make a copy of your referenced variable.

// ES6
let copiedObject = Object.assign({}, originalObject)