VueJS DOM проблема

Question

Я ищу способ сделать nestable dom-элементы перетаскиваемыми с помощью VueJS.Пока что многого достиг.Однако после перетаскивания некоторые элементы исчезают.

Может кто-нибудь взглянуть и подсказать, что пошло не так?

<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 link: https://jsfiddle.net/minuwan/gc5xjLru/

Answer 1

Похоже, вам просто не хватает пустого массива задач.(и проблема с вложенным вложением, упомянутая Роем)

если вы определите его для каждого объекта, вы разрешите его перемещение.

---

Обновлен фрагмент кода для исходного примера 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>