MaxLeiter / sortablejs-vue3

A thin wrapper around Sortable.js for Vue 3
https://sortablejs-vue3.maxleiter.com
MIT License
364 stars 20 forks source link

way to get refs to components #64

Open SIGSTACKFAULT opened 1 year ago

SIGSTACKFAULT commented 1 year ago

I need to access something which is computed(() => {...}) inside the components i'm drag-and-dropping.

there doesn't seem to be any way to get my hands on a list of refs, like you would do with v-for.

is there a secret hidden way, or could such a feature be added?

mateusmcordeiro commented 1 year ago

looking to the code and using the current doc as example, i think you can do somethink like this:

<template #item="{element, index}">
     <div class="draggable" :key="element.id" :ref="(el) => setDraggableRefs(el)"> <!-- or just  :ref="setDraggableRefs" -->
        {{ element.name }}
     </div>
 </template>

 <script setup>
//code skip
const draggableRefs = ref([]);
function setDraggableRefs(el) {
  // myListProp is the Array you passed as `:list` inside the Sortable component
  if (
    draggableRefs.value.length === myListProp.length 
  ) {
    return;
  }
  // using Set will prevent duplicated items (it can happen because re-rendering)
  draggableRefs.value = [...new Set([...(draggableRefs.value, el])];
}