Объединение VueJS V-if директивы с Vue Draggable

Question

Я пытаюсь объединить список с директивой v-if в компоненте Vue-Draggable.

Вариант использования: пользователи могут заказывать элементы в длинном списке, а также «скрывать» разделы этого списка. Проблема, с которой я сталкиваюсь, заключается в том, что сразу после скрытия элементов перетаскиваемый объект VueJS не обновляет индекс. Странно то, что после того, как событие с одним перетаскиванием завершено (и удаляет элемент в неправильном месте из-за несоответствия в индексе), проблема решается, и последующие действия перетаскивания следуют за представлением.

Что я пробовал:

• Свяжите элементы с помощью переменной: key
• Используйте операторы NextTick во всех событиях, которые VueJS Draggable срабатывает (изменить, обновить, отсортировать, переместить, начать, завершить и т. д.)
• Вручную исправьте значения oldIndex и newIndex на основе второго параметра с фиксированным ключом. Мне почему-то кажется, что я не могу вмешиваться в то, что эти индексы определяются сортируемым плагином.
• Отправка событий вручную для обновления элемента Draggable после скрытия / отображения.

У кого-нибудь есть примеры успешного объединения директив show с перетаскиваемыми компонентами?

Answer 1

ОК, поэтому ключ кроется в разнице между директивами V-if и V-show. Я использовал первый, который удаляет элементы из DOM и вызывает проблемы с обновлением.

Если вы воспользуетесь последним, элементы DOM в основном останутся без изменений, и проблема не будет существовать в первую очередь. Закрытие и отъезд здесь на случай, если кто-то споткнется из-за той же проблемы.