nested-component doesn't work

[desousar]

Thanks for proposing an alternative to vuedraggable on Vue3 !

Situation: I have a card list. Some cards may contain other cards. This is the same behavior you illustrated in your demo (https://alfred-skyblue.github.io/vue-draggable-plus/en/demo/nested/).

I've reproduced the same basic example in my application, but the list isn't rendered.

VueDraggable alone works correctly, but not with nested-component

My application: Vue 3, currently in Option API (migration to composition API to come). I run it in google chrome. "vue": "^3.3.9", "vue-draggable-plus": "^0.3.0",

<VueDraggable tag="ul" v-model="lista" group="g1">
    <li v-for="el in modelValue" :key="el.name">
      <p>{{ el.name }}</p>
      <nested-component v-model="el.children" />
    </li>
  </VueDraggable>

data() {
  return {
    lista: [
        {
          name: 'item 1',
          children: [
            {
              name: 'item 2',
              children: [],
            },
          ],
        },
        {
          name: 'item 3',
          children: [
            {
              name: 'item 4',
              children: [],
            },
          ],
        },
        {
          name: 'item 5',
          children: [],
        },
      ],
  }
}

[Alfred-Skyblue]

Ensure there is a default height when children.length is 0; otherwise, the drag-and-drop may not find the target element.

[desousar]

Ok I added the class class="drag-area" to VueDraggable and I change v-model with :list

<VueDraggable class="drag-area" tag="ul" v-model="lista" group="g1">
  <li v-for="el in lista" :key="el.name">
    <p>{{ el.name }}</p>
    <nested-component v-model="el.children" />
  </li>
</VueDraggable>

import { VueDraggable } from 'vue-draggable-plus';

I use the same data lista

.drag-area {
  min-height: 50px;
  outline: 1px dashed;
}

With <nested-component v-model="el.children" />

result:

browser inspector:

Am I doing something wrong with the nested-component ?

[Alfred-Skyblue]

This is a recursive component; if nesting is required, you need to recursively call itself.

[desousar]

Oh.... yes..... I just didn't pay attention to the detail. Indeed, it works much better now!

Thank you !!!!