jquery - 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 提到的 draggable-nested 问题)

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

---

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