v-list-item-group 주의점

 v-list-item-group 사용시 v-model을 활용하여 선택된 데이터를 관리한다.

이 때, 관리되는 데이터는 Array 여야만 하고,  선택 된 리스트의 순서(인덱스)가 저장 됨.

v-list-item의 항목을 동적으로 변화시키는 과정에서 v-model의 값이 의도하지 않는 값으로 세팅되는 현상 발생..

해결법 :  v-list-item의 key 값을 index 값으로 할당하여야 정상 작동.. 

아무 생각 없이 list 값들 (항목들)이 고유해서 해당 값을 그대로 key 값으로 사용했었는데.. 

idx로 key를 변경하니 정상작동.. 개빡..

<기존 코드>

     <v-list-item-group

      v-model="fil.selected"

       multiple

     >

     <v-list-item  v-for="(v, k) in fil.list" :key="k" active-class="text--accent-4"  >

<변경 코드>

    <v-list-item-group

      v-model="fil.selected"

       multiple

     >

     <v-list-item  v-for="(v, k, idx) in fil.list" :key="idx" active-class="text--accent-4"  >

사소하지만 오랜 시간 걸린 버그다 --.. v-model에 들어가는 값 수정만 몇번을 했는지.. 에휴-오늘의 삽질 끝

[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()