Vue组件中使用Draggable JS拖拽数组元素时，如何移除目标元素前后的空数组？

我来帮你搞定这个问题～首先得指出你现有代码里的一个小错误：splice方法的第一个参数应该是数组索引，而不是数组元素。你写的this.array.splice(this.array[index - 1], 1)是把array[index-1]这个元素当作索引传进去了，这肯定不对。

接下来给你两种可行的解决方案，核心思路都是先判断目标元素前后是否为空数组，再正确移除它们：

方案一：使用splice直接修改原数组（推荐） #

splice是Vue响应式数组支持的方法，修改后会自动触发视图更新。需要注意移除顺序：先删后面的空数组，再删前面的，避免因为数组长度变化导致索引偏移。

isVisible(val, index) {
  // 先处理当前元素后面的空数组
  if (index + 1 < this.array.length && this.array[index + 1].length === 0) {
    this.array.splice(index + 1, 1);
  }
  // 再处理当前元素前面的空数组
  if (index - 1 >= 0 && this.array[index - 1].length === 0) {
    this.array.splice(index - 1, 1);
  }
}

举个例子（对应你的场景）： #

原数组：[[], [0], [], [3], [], [6], []]，当拖拽[6]时，它的索引是5：

1. 先检查索引6的元素是[]，执行splice(6, 1)，数组变为[[], [0], [], [3], [], [6]]
2. 再检查索引4的元素是[]，执行splice(4, 1)，最终数组变为[[], [0], [], [3], [6]]，完全符合你的需求。

方案二：使用slice生成新数组 #

如果你不想直接修改原数组，可以用slice截取数组片段再拼接，最后重新赋值给this.array：

isVisible(val, index) {
  let newArray = [...this.array];
  
  // 移除后面的空数组
  if (index + 1 < newArray.length && newArray[index + 1].length === 0) {
    newArray = newArray.slice(0, index + 1).concat(newArray.slice(index + 2));
  }
  
  // 移除前面的空数组
  if (index - 1 >= 0 && newArray[index - 1].length === 0) {
    newArray = newArray.slice(0, index - 1).concat(newArray.slice(index));
  }
  
  this.array = newArray;
}

小提醒： #

因为你是在@start（拖拽开始）事件触发时修改数组，建议测试下是否会影响Draggable的拖拽行为。如果出现异常，可以考虑把逻辑移到@end（拖拽结束放置后）事件中处理，这样更稳妥。

内容的提问来源于stack exchange，提问作者KFVV