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.

[LiuJinYang9527]

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]

因为注释也被当成了元素