Open VasilisNikiforidis opened 2 years ago
"These problems occur in named slots. if you use it anonymously. Components will work properly in the slot." Working in vue 3.0.0.beta version but it doesn't work in 3.2.37.
change DraggableWrapper.vue
<template>
<draggable
class="paletteGroup"
:group="{ name: groupName, pull: 'clone', put: false }"
:sort="false"
:empty-insert-threshold="0"
:clone="onClone"
:model-value="elements"
:item-key="itemKey"
@start="onStart"
@end="onEnd"
>
<template #item="dragOpts">
<slot v-bind="dragOpts" />
</template>
</draggable>
</template>
PaletteComponents.vue
<template>
<draggable-wrapper
:group-name="category.key"
:elements="category.items"
>
<template v-slot="{ element }">
<palette-item
:item="element"
:group-key="category.key"
class="paletteItem"
/>
</template>
</draggable-wrapper>
</template>
Before I explain my confusion, I want to say that I have read the issue at #24 , but what I don't understand is why does it still happen when I only render a single item inside that slot?
With some debugging, I noticed that the
defaultNodes
in the code below are sometext
elements whose direct children (they only have 1 child) are the components I actually want to be draggable.Here is my code:
DraggableWrapper.vue
PaletteComponents.vue
PaletteItem.vue
Any insight or potential fix is welcome. Wrapping the slot with a div solves the issue but creates a lot of other issues with my layout.