<draggable> with dynamic groups

Question

https://github.com/SortableJS/vue.draggable.next + vue 3 + typescript

I'm trying to set up a list with many dimensions and dynamic groups, basically by nesting one inside another . I'm getting the following warnings:

[Vue warn]: children must be keyed.

[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

but the component works, whish meant - it displays the data correctly. But when trying to move an element between groups I get an error.

I'm getting a bunch of warning

Uncaught TypeError: can't access property "__draggable_context", domElement is null

<template>
 

<div class="">

<div class="">
    <draggable
        class="dragArea list-group 
        :list="contents"
        :group="{ name: 'people', pull: 'clone', put: false }"
        @change="log"
        item-key="name">
        <template #item="{ element }">
          <div class="list-group-item">
            {{ element.name }}
          </div>
        </template>
      </draggable>

</div>

<div class="w-1/2">
  <draggable class="dragArea" :list="contents" tag="transition-group" :group="{ name: 'people'}" :component-data="{name:'fade'}"   >
    <template #item="{element}">
              <div class="list-group-item">
              {{ element.name }}
      
                  <draggable class="dragArea list-group" :list="element.children" tag="transition-group" group="element" :component-data="{name:'fade'}"  >
                      <template #item="{element}">
                          <div class="list-group-item">{{element.name}} {{ element.id }}</div>
                      </template>
                  </draggable>
                  
              </div>
    </template>
  </draggable>
</div>
</div>
 
</template>

<script lang="ts">


import { defineComponent, PropType, ref  } from 'vue'

import draggable from 'vuedraggable'
 

 export default defineComponent({

  name: 'GroupsTest',

  components: { draggable  },
 
  display: "Nested",
  
  order: 15,


  setup() {
 
 

const contents = ref<Array<object>>([
    {
      id: 1,
      name: "General1",
      children: [{
        id: 2,
        name: 'foo-a1'
      }, {
          id: 3,
        name: 'foo-b1'
      }, {
          id: 4,
        name: 'foo-c1'
      }]
    },
    {
      id: 5,
      name: "General2",
      children: [{
          id: 6,
        name: 'foo-a2'
      }, {
          id: 7,
        name: 'foo-b2'
      }, {
          id: 8,
        name: 'foo-c2'
      }]
    },
        {
          id: 9,
      name: "General3",
      children: [{
          id: 10,
        name: 'foo-a3'
      }, {
          id: 11,
        name: 'foo-b3'
      }, {
          id: 12,
        name: 'foo-c3'
      }]
    }
]);
      
 

    return { draggable , contents};

  }
});
 
</script>
 

Does anybody have experience with that? I would appreciate some ideas. Thank you.

Answer 1

First of all can you give us a reproduction? Here is a link to quickstart an exemple (you have a terminal at the bottom to install other dependencies). https://vite.new/vue

For the first warning "[Vue warn]: children must be keyed." when using v-for vue need a unique key to handle list change and transition as effective as possible. ex:

Second error: when you give class to a component vue need to give that class to an html element in the component so when you have 2 or more node html he don't know wich one need to give the class. So i belive your component "draggable" have a multiroot template.