javascript - 将 VueJS V-if 指令与 Vue Draggable 相结合

Question

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

用例是用户可以订购长列表中的项目，但也可以“隐藏”该列表的部分。我遇到的问题是，隐藏项目后，VueJS Draggable 不会更新索引。奇怪的是，在一次拖放事件完成后(并且由于索引不匹配而将元素放置在错误的位置)，问题得到解决，后续的拖放操作将遵循 View 。

我尝试过的:

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

有人有成功地将显示指令与可拖动组件结合起来的示例吗？

Answer 1

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

如果您使用后者，DOM 项将基本上保持不变，并且问题一开始就不存在。关闭并离开这里，以防有人遇到同样的问题。