vue-smooth-dnd
vue-smooth-dnd copied to clipboard
Problem using tag with custom component
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.
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>
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.
Yes. @davestewart's solution didn't work for me (there is nothing which can be 'dragged').
bump @dsl101 did you solve this?