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

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
}