itsource

Vue.js - 개체를 다른 데이터 속성에 '복사'할 때 바인딩하지 않음

mycopycode 2022. 7. 21. 23:38
반응형

Vue.js - 개체를 다른 데이터 속성에 '복사'할 때 바인딩하지 않음

API에서 오브젝트를 가져오고 있는데 모달 로드 시 오브젝트를 다른 오브젝트로 '복제'해야 합니다.

이 방법은 다음과 같습니다.

this.servicesForm.services = this.team.services;

// New object                // API object

지금 문제는 내가 그 팀을 원하지 않는다는 것이다.servicesForm.services 개체를 업데이트할 때 바인딩되어 업데이트되는 services 개체입니다.

그걸 어떻게 하는 거죠?

내 답을 빠르게 찾았다:

this.servicesForm.services = JSON.parse(JSON.stringify(this.team.services));

ES6 솔루션은 Object.assign을 사용하는 것입니다.

this.servicesForm.services = Object.assign({}, this.team.services); 

이것은 얕은 복사본일 뿐이므로, 딥 복사본이 필요한 경우 이 방법을 재귀적으로 적용해야 합니다.

참고 자료: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

언급URL : https://stackoverflow.com/questions/44925125/vue-js-dont-bind-an-object-when-copying-it-to-another-data-attribute

반응형