Vue Draggable与v-if指令结合时索引更新异常问题求助

我之前也踩过这个坑！当用v-if隐藏列表项时，Vue会直接移除对应的DOM节点，但Vue-Draggable底层依赖的Sortable.js并没有自动感知到这个DOM变化，所以它内部维护的元素索引还是旧的，导致第一次拖放位置出错。而拖放一次后，Sortable会重新扫描DOM并更新索引，后续操作就正常了。

下面给你几个实用的解决方案：

方案1：用v-show替代v-if（最简单的选择） #

如果你的场景可以接受隐藏元素仍保留在DOM中（只是不可见），直接把v-if换成v-show就行。这样DOM结构没有变化，Sortable能一直正确识别所有列表项的索引，自然不会出问题：

<draggable v-model="list">
  <div v-for="item in list" :key="item.id" v-show="item.visible">
    {{ item.content }}
  </div>
</draggable>

缺点是如果列表很长，隐藏元素会占用DOM资源，可能影响性能，适合列表项不多的场景。

方案2：通过key强制重新渲染Draggable组件 #

如果必须用v-if移除DOM，你可以给Draggable组件绑定一个key，当控制显示隐藏的状态变化时，更新这个key，让Vue重新创建Draggable实例，这样Sortable会重新初始化并识别最新的DOM结构：

<draggable v-model="list" :key="refreshKey">
  <div v-for="item in list" :key="item.id" v-if="item.visible">
    {{ item.content }}
  </div>
</draggable>

在你的方法里更新refreshKey：

toggleItemVisibility(item) {
  item.visible = !item.visible;
  // 用时间戳作为新key，确保每次都是唯一值
  this.refreshKey = Date.now();
}

这个方法简单粗暴，效果可靠，不需要操作Sortable的内部API。

方案3：手动调用Sortable的refresh方法 #

如果你不想重新渲染整个Draggable组件，可以通过ref获取到Draggable实例，然后调用Sortable的refresh方法，让它重新扫描DOM并更新索引。记得要在$nextTick里执行，确保DOM已经完成更新：

<draggable ref="myDraggable" v-model="list">
  <div v-for="item in list" :key="item.id" v-if="item.visible">
    {{ item.content }}
  </div>
</draggable>

对应的方法：

toggleItemVisibility(item) {
  item.visible = !item.visible;
  // 等待DOM更新完成后再刷新Sortable
  this.$nextTick(() => {
    this.$refs.myDraggable.sortable.refresh();
  });
}

这个方法更灵活，适合需要保留Draggable组件状态的场景。

你可以根据自己的实际场景选择合适的方案，我当时用的是方案2，快速解决了问题！

内容的提问来源于stack exchange，提问作者T. Altena