Vue.js

vue.js를 사용하면서 발생했던 문제

 

- 부모 component의 데이터 변화를 자식 component에서 감지하지 못함.

 

1. 부모 component의 데이터를 자식 component에 props으로 전달.
2. 자식 component에서는 전달받은 데이터를 기반으로 자신의 데이터를 set
3. 부모 component에서 ajax로 새로운 데이터를 가져오지만, 자식 component의 데이터는 ajax로 가져오기 전 데이터를 계속 가지고 있는 문제 발생!

원인 : 부모 component의 데이터가 변경됐지만, 자식 component에서는 mounted()로 처음에만 데이터를 set하고 있기 때문에 변경된 것을 인식하지 못하고 계속 이전 데이터를 유지하고 있었다.

 

해결 : watch()를 통해 부모 component로부터 전달받은 데이터의 변화를 감지하고, 데이터를 set할 수 있도록 수정, 이때 watch안에 부모 데이터의 변화를 감지하는 함수명은 부모데이터의 변수명과 일치해야한다.

watch 문법 - kr.vuejs.org/v2/guide/computed.html

computed와 watch — Vue.js

 

- 부모 component에서 전달받은 배열 데이터를 자식 component에서 변경할 때 부모 component 데이터까지 같이 변경되는 문제

 

1. 부모 component에서 전달받은 배열 데이터를 자식 component에서 수정
2. 자식 component에서 수정사항을 취소할 때 화면에는 부모 component의 원래 데이터가 출력되어야 하는데 자식 component에서 변경한 데이터로 출력되는 현상 발생

=> 원래 의도는 부모 component에서 받은 데이터를 부모 component와 별개로 수정 화면에서 자식 component의 데이터를 수정하고, 수정사항을 취소하면 원래 목록 화면에는 부모 component의 원본 데이터가 나타나는 것. 

 

원인1. 부모 component에서 전달받은 배열 데이터를 그대로 사용했기 때문에

원인2. 원인1을 해결하고자 자식 component에서 array를 새로 만들어서 부모 component에서 전달받은 배열 데이터를 복사해서 사용했으나 복사하는 방식이 잘못됨.

 

해결 : slice() 를 사용, 그냥 화면에 출력할 경우에는 상관없지만 데이터의 변경이 일어날 경우에는 slice()를 이용해 복사해줘야 원본 데이터와 복사 데이터가 분리되서 동작한다.

 + 객체를 복사할 때도 비슷한 문제가 발생한 적이 있음. 이때는 {...Object} 형식으로 복사해서 해결함.