Refs inside v-for does not work within draggable

[Luciennnnnnn]

I put a component in draggable like this:

const refs = ref([])

<draggable :list="imageUrls" item-key="url" ghost-class="ghost" dragClass="dragitem" animation=500 handle=".mover" @start="dragging = true" @end="endDrag"

<template #item="{element, index}" style="flex-basis:none">

but it seems does not work, refs only represent one component randomly, not an array.

I expect it could be used like this

@David-Desmaisons

[StefanFlaschko]

Same problem here. I need to use a template ref on the elements inside the draggable template, but I'm only getting one Item and not the whole list. Any updates on this?

Is there another way of getting the complete node list of elements inside the draggable template ?

This does not work: <draggable :list="previewArray.images" group="images" @start="drag = true" @end="drag = false" item-key="id" class="upload_previews" > <template #item="{ element }"> <div class="image"> <img class="preview imgPreview" :src="element.image" ref="imgRefs" /> </div> </template> </draggable>

[alexfict]

Same problem here.

[murohamasho0606]

Might be helpful. https://stackoverflow.com/questions/71414977/refs-inside-v-for-loop-for-vue-v3-2-25-or-above

[yoyosan]

Might be helpful. https://stackoverflow.com/questions/71414977/refs-inside-v-for-loop-for-vue-v3-2-25-or-above

It doesn't help.

[sonnguyenxaion]

Do you guys have any update for this issue?

[yoyosan]

I ended up doing something like this,

In <template>,

<Draggable v-model="emails" class="column" @change="update" item-key="id" ghost-class="ghost" group="emails">
      <template #item="{ element, index }">
        <EmailCard
          :key="element.id"
          class="q-my-sm"
          :ref="addEmailCardRef"
          v-model:item="emails[index]"
        />
      </template>
</Draggable>

In <script setup lang="ts">,

/**
 * Refs to EmailCard components
 */
const emailCards = ref<Array<InstanceType<typeof EmailCard>>>([]);

function addEmailCardRef(element: InstanceType<typeof EmailCard>) {
  if (emailCards.value.indexOf(element) === -1) {
    emailCards.value.push(element);
  }
}

And to call something on each component, use:

emailCards.value.forEach((component) => {
    if (component) {
      component.checkFieldsValid();
    }
  });

[sonnguyenxaion]

@yoyosan Thank you so much but I tried to implement as yours but it seems not to work.

<Draggable
      v-if="!isLoading"
      v-bind="dragOptions"
      v-model="listData"
      group="list"
      item-key="listId"
      tag="transition-group"
      :component-data="{
        name: 'flip-list',
        type: 'transition',
        class: $style.listGroupContainer,
        tag: 'div',
      }"
      @start="drag = true"
      @change="onMovedList"
    >
      <template #item="{ element: item }">
        <StatusList
          :ref="addStatusListRef"
          v-model:model-flag="flag"
          :list-id="item.listId"
        />
      </template>
    </Draggable>

const statusLists = ref<Array<InstanceType<typeof StatusList>>>([]);
const addStatusListRef = (element: InstanceType<typeof StatusList>) => {
  console.log('element: ', element);
  if (statusLists.value.indexOf(element) === -1) {
    statusLists.value.push(element);
  }
};

[sonnguyenxaion]

@yoyosan I already solved my issue, this errors was because missing :key props in <Draggable/>