将VueJS V-if指令与Vue Draggable

Question

我正在努力将列表与Vue-Draggable组件中的v-if指令组合在一起。

用例是用户可以在长列表中订购商品，但也可以“隐藏”该列表的各个部分。我遇到的问题是，在隐藏项目后，VueJS draggable不会更新索引。奇怪的是，在完成一次拖放事件后（由于索引不匹配而将元素放在错误的位置），问题得到解决，后续的拖放操作也跟随视图。

我尝试了什么：

• 使用：键变量
绑定元素
• 在VueJS Draggable的所有事件中使用NextTick语句 火灾（更改，更新，排序，移动，开始，结束等）
• 根据第二个固定密钥参数手动更正oldIndex和newIndex值。我似乎无法干扰由可排序插件确定的这些索引。
• 隐藏/显示后手动发出事件以更新Draggable元素。

有没有人有成功将show指令与可拖动组件相结合的例子？

Answer 1

好的，所以关键在于V-if和V-show指令之间的区别。我使用前者，它从DOM中删除项目并导致更新问题。

如果您使用后者，DOM项目将基本保持不变，并且问题首先不存在。关闭并离开这里，万一有人偶然发现同一问题。