Комбинирование директивы VueJS V-if с Vue Draggable

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

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

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

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

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


javascript vue.js jquery vuejs2 rubaxa-sortable
person T. Altena    schedule 25.04.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

person T. Altena    schedule 25.04.2018