Почему drag/drop работает некорректно?

Question

[hckn]

Если перетягивать список, то видим, что данные успешно сортируются, а отображение почему-то сбрасывается. Что не так? https://codesandbox.io/s/lr7qn866oz

Если убрать собственно саму сортировку, то отображается все ок

this.$emit('input', move(this.items, oldIndex, newIndex))

Answer 1

[0xD34F]

Потому что key кривой - завязан на индекс. Сделайте, чтобы он соответствовал реальным данным - всё будет OK.

Comments

[hckn]

Но ведь это хардкод items[i].image
У меня может не быть там image вообще

[0xD34F]

hckn, а, ну можно использовать key элементов, переданных через слот... Обновил пример по ссылке.

[hckn]

0xD34F, откуда вы все это знаете? Откуда вы узнали что там есть параметр key? Ткните пожалуйста в документацию. Вроде читал про слоты, но не помню я там такого.

[0xD34F]

hckn, элементы шаблона при компиляции преобразуются в экземпляры класса VNode, у которого свойство key... ну, просто есть - можете посмотреть объявление класса. Не знаю, что ещё тут можно сказать.

[hckn]

0xD34F, короче, это недокументировано, верно? В любом случае, спасибо огромное.

[0xD34F]

hckn, документировано. Только конечно никто и никогда не будет писать инструкции на все случаи жизни.

В одном месте написано про Virtual DOM и то, какие есть свойства (в том числе и key) у его узлов (VNode), в другом - что эти самые VNode и передаются через слоты. Ваше дело - как-то соединить эти знания у себя в голове.