sortablejs-vue3
sortablejs-vue3 copied to clipboard
way to get refs to components
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?
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])];
}