sortablejs-vue3 icon indicating copy to clipboard operation
sortablejs-vue3 copied to clipboard

way to get refs to components

Open SIGSTACKFAULT opened this issue 2 years ago • 1 comments

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?

SIGSTACKFAULT avatar Jan 24 '23 05:01 SIGSTACKFAULT

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])];
}

mateusmcordeiro avatar Apr 29 '23 22:04 mateusmcordeiro