item slot must have only one child

[90ker]

When i put a code comment in the Draggable component slot, it will throw error.

[90ker]

I think the comments shouldn't be include.

[Melon0527]

same issue

[cschra]

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 }"

[agardes]

It considers your comment to be part of the div. I had the same issue and deleting the comment fixed it.

[albadedan]

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 }"

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.

[trry-hub]

因为注释也被当成了元素

[rachitpant]

Its not just the comments. There are valid use cases where one "item" from model can result in two "children" inside the slot.

See the screenshot below that shows old code that worked , and with this new vue 3 library , it doesn't work. ( because of the two tr's inside the slot , it complains item slot must have only one child )
We are sometimes creating two rows based on the condition , so there are actually two children inside the slot. ( see the two trs )

See below , there were 12 "items" passed to draggable , but 13 actual rows. ( A blank row was created conditionally after row 3 ). This worked perfectly in the old library , not anymore after upgrading to vue 3. There is no draggable-handle in the extra row , so it can't anyways be dragged.