结合 VueJS V-if 指令和 Vue Draggable

Question

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

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

我尝试过的：

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

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

Answer 1

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

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