VueDraggable中的嵌套不起作用

Question

我的问题是：

I使用VueDraggable库在DragBoard.vue和DropBoard.vue之间拖放元素，当元素位于DropBoard.中时，应该允许嵌套特定类型的元素。

我将以这个元素为例：

• “分组项目”

要做到这一点，我遵循了以下示例：https://github.com/SortableJS/vue.draggable.next/blob/master/example/components/nested-example.vue

--当我将“分组项”放到DropBoard.vue : IMG中时，这就是我得到的结果。

如您所见，无论出于何种原因，DropBoard第二次出现在分组项中。我认为嵌套拖放标记也循环了可拖动标记的内容，我不知道如何解决这个问题.

dragItems.JSON (用于DragBoard.vue)：

​

1st object is a common element
2nd object is a nestable element
[
  {
    "type": "Simple list",
    "title": "Simple list",
    "id": 1,
    "properties": "this is an item property"
  },
  ...
  {
    "type": "Grouped items",
    "title": "Grouped items",
    "id": 10,
    "properties": "this is an item property",
    "tasks": []
  },
 ...
]

​

DropBoard.vue模板：

<template>
  <div class="board">
    <div class="head">Mock</div>
    <div class="dd-container">
      <draggable
        :list="tasks"
        v-model="dropItems"
        item-key="title"
        :group="{ name: 'items', put: true }"
        @change="log"
      >
        <template #item="{ element }">
          <div
            class="item"
            :key="element"
          >
            <div>
              {{ element.title }}
            </div>
            <nested-draggable
              v-if="element.tasks"
              :tasks="element.tasks"
              class="group-container"
            />
            <div class="trashico" :key="index">
              <i class="fas fa-trash" @click="deleteItem(index)"></i>
            </div>
          </div>
        </template>
      </draggable>
    </div>
  </div>
</template>

DropBoard.vue脚本

<script>
import draggable from "vuedraggable";

export default {
  name: "nested-draggable",

  components: {
    draggable,
  },
  props: {
    dropItems: {
      type: Array,
      required: true,
    },
    tasks: {
      required: true,
      type: Array,
    },
  },
  data() {
    return {
      dropItems: [],
    };
  },
  methods: {
    deleteItem(id) {
      this.dropItems.splice(id, 1);
    },
  },
};
</script>

Answer 1

这里是我在使用Vue DevTools时发现的，它已经明确地退出了这个问题。

见图：IMG