vuejs에서 데이터 개체를 복사하고 속성을 제거하면 원래 개체에서도 속성이 제거됩니다.

vuejs에서 데이터 개체를 복사하고 속성을 제거하면 원래 개체에서도 속성이 제거됩니다.

다음과 같은 데이터 개체가 vue에 있습니다.

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

그런 다음 개체를 복사하고 필요에 따라 특정 속성을 제거한 후 다음과 같이 개체를 백엔드에 게시합니다.

var postData = this.rows;
      postData.forEach(function(o) {

        if (o.public === true) {
          delete o.info;
        }
      });

      var uploadData = {};
      uploadData.blogpost = postData;
      axios({
          method: 'post',
          url: myUrl,
          responseType: 'json',
          data: uploadData
        })

문제는 말이다delete o.info;또한 VM 루트 데이터에서 속성을 삭제합니다.새 변수를 작성하거나 루트 데이터를 해당 데이터에 복사했기 때문에 그 이유를 알 수 없습니다.vue에서 루트 데이터 VM을 변경하지 않고 게시하기 전에 데이터에서 특정 개체 속성을 제거하려면 어떻게 해야 합니까?

데이터의 복사본을 복제하여 가져와야 합니다.데이터를 복제하는 방법은 다양하며, Lodash의 기능을 사용하는 것을 추천합니다.cloneDeep

postDataCopy = _.cloneDeep(postData)

그런 다음 수정할 수 있습니다.postDataCopy원본을 수정하지 않고 원하는 대로 쓸 수 있습니다.

javascript에서 오브젝트는 참조에 의해 복사되기 때문입니다.이것은, 비록 당신이 변경중이지만,postData데이터를 보관하고 있는 원래 주소를 참조하고 있습니다. rows.당신은 이걸 할 수 있다.

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

참조된 변수의 복사본을 만들어야 합니다.

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

행이 참조 유형이고 postData가 행과 동일한 참조를 가리키기 때문입니다.참조 없이 복사(딥 복사)하려면 오브젝트/어레이에 오브젝트 또는 어레이와 같은 참조 유형이 아닌 값 유형(숫자, 문자열, 부울 등)만 포함되어 있는 경우 Object.assign을 사용합니다.개체에 개체를 포함하는 개체와 같은 참조 유형이 포함된 경우 내부 복사된 개체는 참조 유형이 됩니다.

예 1:

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

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

사용자로부터 속성을 복사합니다.따라서 사용자와 copyedUser는 값 유형만 포함하므로 서로 다른 개체입니다.

예 2:

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

};

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

이제 사용자로부터 모든 속성을 복사하지만 사용자에게는 참조 유형(개체)인 other_info가 포함됩니다.따라서 값 유형인 copyedUser 속성을 변경해도 사용자에게 영향을 주지 않지만 copyedUser 또는 사용자의 other_info를 변경하면 서로 영향을 미칩니다.

copiedUser.name ="new name";// 사용자에게 반영되지 않음

copiedUser .other_info.country = "new country";// 사용자에게도 반영됩니다.

따라서 Object.assign은 한 레벨로 복사됩니다.개체에 중첩된 개체 또는 배열이 포함된 경우 마지막 수준까지 반복하고 복사해야 합니다.

Object.assign에는 {}과(와) []가 필요합니다.어레이를 반환할 수도 있습니다.

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

따라서 이 경우 오브젝트가 복사되어 다른 어레이에 푸시될 때까지 어레이를 반복해야 합니다.

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]));
}

반응성은 Observer_proto에 의해 각 개체와 배열 내부에서 발생합니다.

각 개체에서 관찰 가능한 해치를 제거하기 위해 필요한 경우 다음 개체 util을 mixin으로 사용할 수 있습니다.

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

};

그리고 가게에서 물건을 사는 사람들.

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

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

언급URL : https://stackoverflow.com/questions/48363604/vuejs-copying-data-object-and-removing-property-will-remove-the-property-from-or