Проблема с VueJS DOM

Я ищу способ сделать вложенные элементы 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: https://jsfiddle.net/minuwan/gc5xjLru/

Вам нужен key для Vue, чтобы правильно соотносить данные с объектами DOM.

— 12.02.2019 14:11

@RoyJ Проблема в том, что «<шаблон>» не может быть набран ключом. :(

— 12.02.2019 14:44

Вы можете поставить key на element. Это все еще не мешает вещам исчезать, хотя.

— 12.02.2019 14:48

@RoyJ Я тоже пытался. Я преобразовал тег шаблона в div и попробовал. Все еще такой же.

— 12.02.2019 14:49

Проблема похоже с draggable-nested. Если вы уберете это и замените {{element.id}}, поведение будет в порядке.

— 12.02.2019 14:56

@RoyJ Это правда, но я не могу придумать другого способа рекурсивно перетаскивать узлы.

— 12.02.2019 15:00

@RoyJ Это самая простая версия того же самого. jsfiddle.net/minuwan/Lu8bwg5e Та же проблема.

— 12.02.2019 15:02

jquery css html vue.js vuejs2

12.02.2019 13:27

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Ага... Попался... Вот и все. Но в моем сложном JSFiddle я делаю то же самое и не могу понять, что не так. Можешь взглянуть, пожалуйста? jsfiddle.net/minuwan/gc5xjLru [Это версия без выполнения того, что вы сказали].

— 12.02.2019 18:40

Я думаю, проблема может заключаться в том, что вы используете v-model. Я обновил ответ, включив в него код: jsfiddle.net/zbythjoa

— 13.02.2019 18:31

12.02.2019 18:10