Search code examples
javascriptarraysvue.jsvue-componentvuejs3

Can we use vue splice inside foreach() to delete multiple elements?

I have a image grid(in array form), Image Grid UI

There I am trying to add multi-deletion functionality.

ImageGrid array

So When checkbox of each image from grid is checked, I am maintaining an array named selectedImages with selected image's Index from imagegrid array

selectedImages Array

and on click of delete button I have coded below remove method:

     removeSelectedImages() {
        console.log(this.additionalPhotos);  //ImageGrid array
        console.log(this.selectedImages);  //selectedImages array

        this.selectedImages.sort().reverse();
         this.selectedImages.forEach((selectedImageIndex, index) => {
        this.additionalPhotos.splice(selectedImageIndex, 1);
        this.selectedImages.splice(index, 1);
        });
      },

But issue I am facing is splice is just working once, initially I thought that is because suppose I reset value of index 2 and when it comes to index 3 then it becomes index 2 so issue is coming. so as solution I have reversed selected images array based in value (indexes of Grid image array) but still it is behaving same.

suppose I selected image 2 & 1 but splice only deleting value 2 second time it is not coming inside loop however if I remove splice then it runs 2 times.

Kindly suggest best method for it.

Solution

  • You can try to filter deleted images:

    let additionalPhotos = [{fileSrc: 'aa', fileName: '1.png'}, {fileSrc: 'bb', fileName: '2.png'}, {fileSrc: 'cc', fileName: '3.png'}, {fileSrc: 'dd', fileName: '4.png'}, {fileSrc: 'ee', fileName: '5.png'}, {fileSrc: 'ff', fileName: '6.png'},]
const selectedImages = [2,4]
function removeSelectedImages() {
  additionalPhotos = additionalPhotos.filter((_, idx) => {
    return !selectedImages.includes(idx)
  })
}
removeSelectedImages()
console.log(additionalPhotos)