＆lt; draggable＆gt;与动态组

Question

https://github.com/sortable.com/sortablejs/vue.draggable.draggable.next +打字稿

我试图设置具有许多维度和动态组的列表，基本上是通过将一个嵌套在另一个列表中。我会收到以下警告：

[Vue警告]：必须被关键。

[VUE警告]：无关的非prop属性（类）传递给组件，但由于组件呈现片段或文本root节点而无法自动继承。

但是该组件有效，意思是 - 它正确显示数据。但是，当试图在组之间移动元素时，我会遇到错误。

我得到了一堆警告

的TypeError：无法访问属性“ __draggable_context”，domelement是无人

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

有经验的吗？我会感谢一些想法。谢谢。

Answer 1

首先，您可以给我们复制吗？这是QuickStart示例的链接（您在底部有一个终端可以安装其他依赖关系）。
https://vite.new/vue

对于第一个警告，[vue warn]：必须键入孩子。 “使用V-For时，需要一个唯一的密钥来处理列表的更改和过渡，尽可能有效。
前任：

第二个错误：当您将课堂上课时，Vue需要将该类给组件中的HTML元素时，因此当您有2个或更多节点html时，他不知道他不知道需要给予班级。因此，我相信您的组件“可拖动”具有一个多数模板。