Unable to have vue component as tag

[michaeldtruong]

(using 4.0.1) I am unable to use a component as the 'tag'. The component itself is registered globally

main.js import CanvasElementsDragTag from '@/app/components/CanvasElementsDragTag'; app.component('CanvasElementsDragTag', CanvasElementsDragTag);

CanvasElementsDragTag.vue

<template>
  <div></div>
</template>

<script>
export default {
  setup() {
    console.log('in');
  }
}
</script>

CanvasElements.vue

  <draggable
    v-model="computedList"
    item-key="id"
    @choose="handleChoose"
    @start="handleStart"
    @end="handleEnd"
    :group="group"
    :animation="150"
    :swap-threshold="0.7"
    :invert-swap="true"
    :fallback-on-body="true"
    :set-data="setData"
    tag="canvas-elements-drag-tag"
  >
    <template #item="{element}">
      <component 
        @mouseover="ev => ev.stopPropagation()"
        :is="element.elementType" 
        :data="element"
      />
    </template>
  </draggable>

I am able to see 'in' in the console but get this error after

Not sure if there is something obvious I am missing.

[David-Desmaisons]

Try tag="CanvasElementsDragTag"

[michaeldtruong]

Its one of the things I already tried, no dice same error =(

[entioentio]

+1 Uncaught (in promise) TypeError: Cannot set property '__draggable_context' of null I get this when creating new item on the list. Thanks for the workaround of using a html tag as a wrapper!

[upupzealot]

+1 any solution here?

[David-Desmaisons]

@michaeldtruong Make sure that you register the component in the same app instance where you instanciate the draggable component.

[michaeldtruong]

@David-Desmaisons Thanks for the suggestion, I ended up changing my implementation so I don't need to get this working anymore. I did take a second look into this yesterday to close the issue but it seems that it was not what was causing the error. I will revisit this in the future to see what is it with my implementation that is causing it to not work properly.

[cihadturhan]

I'm having the same error. Uncaught (in promise) TypeError: Cannot set property '__draggable_context' of null

Looks like it returns null from the slot el in componentStructure.js

const getHtmlElementFromNode = ({ el }) => el;
// ...
// ...
updated() {
    const { defaultNodes, realList } = this;
    defaultNodes.forEach((node, index) => {
      addContext(getHtmlElementFromNode(node), {
        element: realList[index],
        index
      });
    });
  }

Did some research. Evan You had a comment about it:

You should not be relying on vnode.el in userland code. It's not documented public API and there is no guarantee about what the "expected behavior" is. The documented public API for accessing mounted DOM is via template refs.

https://github.com/vuejs/vue-next/issues/815#issuecomment-597736026

I believe the implementation logic should change based on this comment.

[WormGirl]

I have the same problem.

// component
<template>
  <draggable
    :list="list"
    :item-key="itemKey"
    tag="transition-group"
    :component-data="{
      name: typeDrag ? null : 'flip-list'
    }"
    @start="typeDrag = true"
    @end="typeDrag = false"
    :animation="200"
    ghost-class="ghost"
    :group="group"
  >
    <template #item="data">
      <slot name="item" v-bind="data"></slot>
    </template>
  </draggable>
</template>

//  other file to use
<DraggableBox :list="typeList" item-key="value" group="type">
          <template #item="{ element }">
            <div class="lc-drag">
              <svg class="icon lc-dragbar" aria-hidden="true">
                <use xlink:href="#icon-vm-drag"></use>
              </svg>
              <ACheckbox :value="element.value">
                {{ element.name }}
              </ACheckbox>
            </div>
          </template>
        </DraggableBox>

[GeraldGallet]

Hey @WormGirl, I recently had the same issue but with a <component /> tag. What worked for me was wrapping it in a <div></div> tag. The documentation says your template should only have one child element, and I think the <draggable> tries to read the DOM to get this child element, but with a <slot /> or <component /> it doesn't manage to do so. So your solution here would be :

<draggable
    :list="list"
    :item-key="itemKey"
    tag="transition-group"
    :component-data="{
      name: typeDrag ? null : 'flip-list'
    }"
    @start="typeDrag = true"
    @end="typeDrag = false"
    :animation="200"
    ghost-class="ghost"
    :group="group"
  >
    <template #item="data">
      <div>
        <slot name="item" v-bind="data"></slot>
      </div>
    </template>
  </draggable>

[WormGirl]

Hey @WormGirl, I recently had the same issue but with a <component /> tag. What worked for me was wrapping it in a <div></div> tag. The documentation says your template should only have one child element, and I think the <draggable> tries to read the DOM to get this child element, but with a <slot /> or <component /> it doesn't manage to do so. So your solution here would be :

<draggable
    :list="list"
    :item-key="itemKey"
    tag="transition-group"
    :component-data="{
      name: typeDrag ? null : 'flip-list'
    }"
    @start="typeDrag = true"
    @end="typeDrag = false"
    :animation="200"
    ghost-class="ghost"
    :group="group"
  >
    <template #item="data">
      <div>
        <slot name="item" v-bind="data"></slot>
      </div>
    </template>
  </draggable>

You are right, i resolved it by this too.

[shy1118999]

I had the same problem when I upgraded all the dependencies.

[nathanwalasek]

I had the same problem when I upgraded all the dependencies.

Were you able to resolve your issue? I ran updates on packages and only recently discovered that Draggable with transition-group tag is no longer working.