미리적는 결론: 라이브러리 이슈!
이번 프로젝트 진행 중,
https://github.com/phoenixwong/vue3-timepicker 의
vue3-timepicker 라이브러리를 사용 중 이였는데, 뭔가 이상했다.
mounted, created 시점이나 data() option에서 처음 데이터를 바인딩 할 때는 displayTime이 잘 바뀌었는데,
props를 통해서 데이터를 전달하고, 해당 props 데이터를 watch를 통해
변경을 감지해서 timepicker v-model로 설정한 값을 변경하면
아무리 해도 displayTime이 바뀌지 않는것이였다.
vue 개발자 툴이나 관리자 콘솔에서 값을 찍어봐도 잘 바뀌어있는데...
그래서 처음에는 parent component와 child component의 구조에 대해
원래 이해가 얕아서 좀 제대로 알아볼 겸 한참 삽질을 하다,
해당 라이브러리의 issue항목에 들어가니 나와 같은 issue를 report한 사람이 있었다.
(감사합니다 danielgindi센세...)
평소에 라이브러리라면 무지성으로 가져다 쓰고,
대부분 내가 잘 못 값을 던져주거나 해서 문제가 생기다보니
라이브러리 자체의 문제일 거란 생각 자체를 못 하고 있었다.
다행히 해당 라이브러리의 라이센스는 MIT 라이센스여서
내가 해당 라이브러리를 수정해서 사용해도 문제가 없었다.
덕분에 value -> modelValue로 변경하니, 내가 원하는 대로
잘 동작했다!
front의 세계는 오늘도 어렵다....
p.s js파일을 수정하지 않고도 :key에 v-model에 바인딩 하는 값을 지정해주니
정상적으로 displayTime이 표출 되었다!
p.s 하다보니 알게 된 것인데, :key로 강제 refresh를 시켜주면,
timepicker안에서 value가 emit될 때 마다 toggle또한 같이 닫혀서,
일단은 js파일을 수정하는 쪽으로 가닥을 잡았다.
