[Vue.js]부동산 쇼핑몰

상황 : 아이템 리스트의 정렬상태를 처음 상태로 되돌려주는 Sort button 을 만들던 중 에러 발생

 

 

바뀐 데이터들을 처음 상태로 되돌려주기 위해선 처음의 상태를 보관하고 있는 변수가 필요했다.

그래서 변경 상태를 저장할 데이터변수 products와 그에 대한 shallow copy에 의해 만들어진 initialProducts 를 만들어 주었다.

 

올.. 제법..

괜시리 뿌듯하다.

 

[...복사할 데이터]

 

주의)

이렇게 하면 products, initialProducts의 데이터가 공유된다.

 

이후엔 sort를 실행시키는 함수 안엔 당연히 현재의 sort 상태에 initaialProducts를 바인딩시키는 코드를 입력하면 된다.

이제 되돌리기 버튼 click 하면 처음의 상태도 되돌려주겠지?

 

그럼 그렇지. 잘 바뀐다.

 

 

에러 발생

---

 

신나게 가격 높은 순 -> 되돌리기 -> 가격 높은 순 -> 되돌리기 왔다갔다 클릭 하다보니

왠걸

'되돌리기'버튼을 눌렀는데도 가격 낮은 순의 정렬로 되어 있다.

 

아오

 

이것도 데이터 바인딩이 일어난 상황일까?

 

<vue devtools를 이용하여 debuging>

가격 높은 순 클릭 후 첫 번째 카드(좌), 되돌리기 누른 후 첫 번째 카드(우)

반복 했을 때. 되돌리기 버튼을 눌러도 첫 번째 카드에 가격 높은 순 일때의 카드가 남아있다.

 

 

해결

---

 

디버깅을 근거로

코드진행 중 어떤 이유로 두 변수가 값을 공유하게 되었으리라 추측했다.

원래 object나 array를 등호로 이으면 값을 공유하니까.

데이터를 가져올 때도 등호로 이을 때도 shallow copy를 해주니 정상 작동.

짝.짝.짝.

 

이렇게

저렇게

아예 같은 원본 데이터를 각각의 개별 데이터로 보존 시키는 방법이었다!

이상, 끝.