Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

way to get refs to components #64

Open
SIGSTACKFAULT opened this issue Jan 24, 2023 · 1 comment
Open

way to get refs to components #64

SIGSTACKFAULT opened this issue Jan 24, 2023 · 1 comment

Comments

@SIGSTACKFAULT
Copy link

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
Copy link

mateusmcordeiro commented Apr 29, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants