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>