vue.draggable.next
vue.draggable.next copied to clipboard
SortableJS
item slot must have only one child
When i put a code comment in the Draggable component slot, it will throw error.
you have to use the name element or else it is not working correctly - I created a PR (#171) to add this to the docs.
if you want to use a custom variable name you can do #item="{ element: item }"
It considers your comment to be part of the div. I had the same issue and deleting the comment fixed it.
you have to use the name
elementor else it is not working correctly - I created a PR (#171) to add this to the docs. if you want to use a custom variable name you can do#item="{ element: item }"
I am using the name element but I still get the bug.
(A) Works
<draggable
v-model="someArray"
group="someGroup"
@start="drag = true"
@end="drag = false"
item-key="id">
<template #item="{element}">
<v-row>
<v-col>{{ element.id }}</v-col>
<v-col>{{ element.name }}</v-col>
</v-row>
</template>
</draggable>
(B) Does not work Produces Error: Item slot must have only one child
<draggable
v-model="someArray"
group="someGroup"
@start="drag = true"
@end="drag = false"
item-key="id">
<template #item="{element}">
<!-- some comment -->
<v-row>
<v-col>{{ element.id }}</v-col>
<v-col>{{ element.name }}</v-col>
</v-row>
</template>
</draggable>
(C) Also does not work, but in a different way Does not produce the error, but does not render anything
<draggable
v-model="someArray"
group="someGroup"
@start="drag = true"
@end="drag = false"
item-key="id">
<template #item="{element}">
<template>
<!-- some comment -->
<v-row>
<v-col>{{ element.id }}</v-col>
<v-col>{{ element.name }}</v-col>
</v-row>
</template>
</template>
</draggable>
(D) Does work, renders just like (A)
<draggable
v-model="someArray"
group="someGroup"
@start="drag = true"
@end="drag = false"
item-key="id">
<template #item="{element}">
<div>
<!-- some comment -->
<v-row>
<v-col>{{ element.id }}</v-col>
<v-col>{{ element.name }}</v-col>
</v-row>
</div>
</template>
</draggable>
I'm using Vuetify, so v-container, v-card, etc, also work instead of div.
