vue-smooth-dnd icon indicating copy to clipboard operation
vue-smooth-dnd copied to clipboard

Problem using tag with custom component

Open dsl101 opened this issue 5 years ago • 4 comments

I'm using Vue with the Quasar framework, and trying to convert a Quasar list into something with drag and drop. My component source is something like:

<q-list>
  <q-item v-for="page in orderedPages" :key="page.id" clickable>
    <q-item-label>{{page.name}}</q-item-label>
  </q-item>
</q-list>

and I've converted that into:

<Container tag="q-list">
  <Draggable v-for="page in orderedPages" :key="page.id" :tag="{value: 'q-item', props: {props: {clickable: true}}}">
    <q-item-label>{{page.name}}</q-item-label>
  </Draggable>
</Container>

The page is rendered correctly, but in the console I get this error:

vue.runtime.esm.js?2b0e:1887 TypeError: Array.prototype.map called on null or undefined
    at map (<anonymous>)
    at g (index.js?c878:1)
    at v (index.js?c878:1)
    at eval (index.js?c878:1)
    at N (index.js?c878:1)
    at VueComponent.mounted (vue-smooth-dnd.esm.js?3f7d:128)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4194)
    at Object.insert (vue.runtime.esm.js?2b0e:3132)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6311)

which is this line in the vue-smooth-dnd mounted() hook:

this.container = SmoothDnD(this.containerElement, mapOptions(this));

I'm not sure where Array.prototype.map is being called, or what I'm not passing in.

dsl101 avatar Mar 14 '19 15:03 dsl101

I had always assumed that tag is only for an HTML tags, not creating a component.

I haven't used Quasar, but try:

<q-list>
  <Container>
    <Draggable v-for="page in orderedPages" :key="page.id">
      <q-item clickable>
        <q-item-label>{{page.name}}</q-item-label>
      </q-item>
    </Draggable>
  </Container>
</q-list>

davestewart avatar Mar 19 '19 15:03 davestewart

This doesn't always work, especially when the structure of the HTML has to be maintained. You can also add a component in a SFC as data and pass it to the tag, but it throws the same error.

johannes-z avatar Mar 25 '19 09:03 johannes-z

Yes. @davestewart's solution didn't work for me (there is nothing which can be 'dragged').

dsl101 avatar Mar 25 '19 09:03 dsl101

bump @dsl101 did you solve this?

jjjrmy avatar Mar 31 '20 19:03 jjjrmy