2022년 1월 11일 화요일

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에 들어가는 값 수정만 몇번을 했는지.. 에휴-오늘의 삽질 끝

댓글 없음:

댓글 쓰기