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

Question

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

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

我尝试过的：

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

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

Answer 1

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

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