vue의 v-slot에 대해 배우다.

 요즘 vuetify2 로 된 UI를 vuetify3 로 변경하는 작업을 하고 있다. vuetify2는 vue2 로 된 UI 이고 vuetify3 는 vue3를 기반으로 하고 있다. 

 어째든 오늘 vue.draggable.next(https://github.com/SortableJS/vue.draggable.next) 라이브러리를 이용한 부분을 수정하고 있었는데  

<draggable v-model="myArray" item-key="id">
  <template #item="{element, index}">
    <div> {{index}} - {{element.name}} </div>
  </template>
</draggable>

이 예제가 이해가 가지 않았다.  #item 이 뭔지 이해하지 못했다.  #을 사용하는 방식이  v-slot 의 단축형이라는 것을 처음 알았다. (참고 : https://v2.vuejs.org/v2/api/#v-slot )

이번 구현에는 이 draggable 안에 draggable 을 구현해야 하는데, 그러면 저 안의 index 가 중복될 텐데 어떻게 해야 하나 고민을 했다. 혹시 {element, index} 이게 dict 형이니까 {element:element1, index: index1} 으로 하면 element1, index1 으로 사용할 수 있나하는 추정을 해봤다. 그런데 그렇게 동작했다. 이 때 까지 이렇게 사용할 일이 없다보니 알지 못했다. 


 새로운 것을 배울 때는 단계를 거쳐서 배워야 하는데 바로 업무에 사용해야 하다보니 배움에 구멍이 많아 진 것 같다. 특히 나에게 front-end 쪽은 좀 구멍이 많은 것 같다.