问题描述
[[],[0],[]. [3],[],[6],[]]
这些元素位于使用可拖动 JS 的 vue 组件中。 Draggable 有两个属性@start 和@end。每当我在数组中拖放元素时都会触发。每当我拖动这些元素之一时,我想删除当前元素前后的空数组。因此,当我拖动 [6] 时,数组应如下所示:
[[],[6]]
isVisible 是在@start 触发的,所以每当我选择一个元素时。如何删除数组中索引前后的元素?我想使用切片?
isVisible (val,index) {
if (val[0] === 6) {
this.array.splice(this.array[index - 1],1)
this.array.splice(this.array[index + 1],1)
}
解决方法
删除之前的元素后,所有剩余元素的索引向下移动,因此之后的元素现在位于 index
,而不是 index + 1
。
为了避免这个问题,最简单的方法是先移除元素。
isVisible (val,index) {
if (val[0] === 6) {
this.array.splice(this.array[index + 1],1)
this.array.splice(this.array[index - 1],1)
}
}
请注意,如果这是循环的一部分,则需要向下调整循环索引以反映当前索引之前的元素已被删除。
,另一种方法是过滤原始数组并返回一个包含您想要的数据的新数组:
let arr = [ [],[0],[],[3],[6],[] ];
console.log('Source:'+arr);
function filterDragged(dragged,arr) {
return arr.filter((e,i,a)=>{
if ((a[i] && a[i].length==0) &&
(a[i+1] && a[i+1].length!=0 && a[i+1][0]===dragged))
return false;
if ((a[i] && a[i].length==0) &&
(a[i-1] && a[i-1].length!=0 && a[i-1][0]===dragged))
return false;
return true;
});
}
console.log('Result:'+filterDragged(6,arr));
console.log('Result:'+filterDragged(3,arr));