[Vue] dialog , component 내의 v-tabs slider 안보이는 버그

문제 : Vue에서 v-tabs 를 dialog내 첫 로딩시 slider 가 보이지 않는 현상이 발생한다.

<정상 Slider >

<비정상 Slider>

사소하지만 신경 쓰이는 버그임이 분명하다..

깃허브에도 버그리포트와 해결 방법을 일부 설명해주고 있다.
https://github.com/vuetifyjs/vuetify/issues/1978

Dialog 해결 방법 : lazy prop을 추가하면 된다!!


추가 문제 : component화 시킨 자식 컴포넌트에 삽입하면 lazy prop이 먹히지 않는다.....

역겨운 구글링 결과 $refs.tabs.slide() (내부적으로도 해당 함수를 통해 slider를 보이게 한다는 것..) 실행 시키면 가능하다고 하지만.. 버전이 달라서 그런지 해당함수는 존재하지 않는다.....

그렇다면, $refs.tabs 를 한번 찍어보자... 다행히도 비슷해 보이는 callSlider 함수가 있다.

해당 함수를 호출하니 다행히도 버그가 해결 되었다.. 다시는 만나지 말자..

아래는 전체 소스 코드이다

<자식 컴포넌트 ref 부여>

<childComp ref="tab_right" ></childComp>

<v-tabs ref 부여>

<v-tabs v-model="active" ref="tabs">

<특정 메소드(버튼을 눌렀다던지) 내부에서 $refs를 통해 v-tabs의 callSlider 함수 호출 >

//부모 컴포넌트에서 다이렉트로 접근 할때

this.$refs.tab_right.$refs.tabs.callSlider() 

//부모 컴포넌트에서 자식 컴포넌트의 함수를 수행, 

this.$refs.tab_right.onSelect() 

//자식 컴포넌트에서는 위 처럼 callSlider 를 수행
//onSelect()
this.$refs.tabs.callSlider()