custom event 질문

[최재문]

Sidebar.vue 의 지역 버튼을 누르면 해당 지역이 선택됨 : 에 이동되게 하는 기능을 만들고 있습니다.
근데 선택된 지역의 데이터들은 상위 컴포넌트에서도 쓸 일이 많아서,
1. Sidebar.vue -> Card.vue 로 custom event를 이용해서 데이터를 보내고, 
2. Card.vue 에서 받은 데이터를 selectedRegionData 라는 배열에 저장,
3. selectedRegionData 를 Sidebar.vue 에 props 로 전달

이런 구조로 코드를 짰습니다.

Sidebar.vue

{ name : "어쩌고1" , color: "어쩌고2" } 이런 데이터를 버튼 클릭할때마다 Card.vue로 보냅니다.

Card.vue

근데 Card.vue 에서 짜놓은 regionSelect 함수가 제대로 작동하질 않습니다.
선택되지 않은 데이터라면 추가하고, 이미 선택된 데이터라면 제거하는 기능을 만들었습니다.

근데 이런식으로 중복이 발생합니다.
콘솔에서 selectedRegionData.value.includes(a) 디버깅 해봐도 true로 나오는데 계속 false 인 if문이 동작합니다.
논리적으로 제대로 된 함수 같은데 왜 else문이 작동하지 않는지를 모르겠습니다.

여태껏 해 본 삽질:
1. emit 으로 전달된 오브젝트 자료형 spread operator로 딥카피 selectedRegionData.value.includes({ ... a }) 
2. includes 대신 indexOf < 0 써보기

[codingapple]

emit 한거 수신하는 코드가 잘못된게 아닐까요 

[최재문]

어떻게 받아오나요?
regionSelect 에 파라미터 a에 emit으로 보낸 데이터가 담겨있던데..

regionSelect 함수 내부에 console.log(a) 하면 저거 나옵니당

[최재문]

디버깅을 하려고 코드를 이렇게 짜봤읍니다
만약 서울 버튼을 누르면 a는 { name: "서울", color: "rgb(165, 14, 21)" } 입니다.
근데 콘솔창에는

이렇게 false가 뜹니다
이거때문에 아까 질문드렸던것처럼 계속 등록이 되는거같은데
왜 false가 나오는지 도통 모르겠네요
오브젝트 자료형의 특성 때문인가요

[codingapple]

네 그런듯요 includes 말고 array.find() 이런 함수를 씁시다 

 

[최재문]

해결했습니다
이런식으로 짜니까 되네요 ㅠㅠ
 

[최재문]

else 쪽은 filter 메소드로 하니까 잘 되네요 
감사합니다 어제부터 이거땜에 머리아팠는데 ㅠㅠ

[글쓴이]

글