VueJS DOM问题

Question

我正在寻找一种方法，使用VueJS使可嵌套的dom元素可拖动。到目前为止取得了很多成就然而，似乎在拖放之后，一些元素正在消失。

任何人都可以看看并指导我出了什么问题？

<script type="text/x-template" id="template-drag">
  <draggable v-model="nodes" :options="{group: { name:'group'}}" class="draggable">
    <template v-for="element in children">
      <element-type :attrs="element"><draggable-nested :children="element.children"/></element-type>
    </template>
  </draggable>
</script>

JSFiddle链接：https://jsfiddle.net/minuwan/gc5xjLru/

Answer 1

看起来你只是错过了空任务数组。 （以及Roy提到的可拖动嵌套问题）

如果为每个对象定义它，则允许它移入。

---

更新了原始jsfiddle示例的代码段

<script type="text/x-template" id="template-drag">
  <draggable :element="'ul'" :list="tasks" class="draggable" :options="{group:{ name:'group'}}">
    <template v-for="el in children" :key="el.name">
      <p>{{el.name}}</p>
            <element-type :attrs="el"><draggable-nested :children="el.children"/></element-type>
    </template>
  </draggable>
</script>