VueJS: Why parent components method unable to delete/destroy child's child (`vue2-dropzone`) component entirely?

Question

I am creating a slider in vuejs and am using vue2-dropzone plugin for file uploads where each slide (slide-template.vue) has a vue2-dropzone component.

When app loads, image files are manually added in each vue2-dropzone (manuallyAddFile plugins API) queried from image API (hosted on heroku)

The issue is when I delete the first slide, calling the parent's (slider.vue) method removeSlideFn (passed down to child as prop) from child (slide-template.vue) component first slide is deleted but not entirely the dropzone images of the first slides are not destroyed and remains in the DOM, instead images of slide2, (the next slide) are deleted from the DOM (Pls try it once on codesandbox demo to actually know what I am mean). This does not happen when I delete slide2 or slide3 but only on slide1.

CodeSandBox Demo

App.vue

<template>
  <div id="app">
    <img width="15%" src="./assets/logo.png">
    <slider />
  </div>
</template>

<script>
import slider from "./components/slider";

export default {
  name: "App",
  components: {
    slider
  }
};
</script>

components\slider.vue (parent)

<template>
    <div>
        <hooper ref="carousel" :style="hooperStyle" :settings="hooperSettings">
            <slide :key="idx" :index="idx" v-for="(slideItem, idx) in slideList">
                <slide-template
                    :slideItem="slideItem" 
                    :slideIDX="idx"
                    :removeSlideFn="removeCurrSlide" />
            </slide>

            <hooper-navigation slot="hooper-addons"></hooper-navigation>
            <hooper-pagination slot="hooper-addons"></hooper-pagination>
        </hooper>

            <div class="buttons has-addons is-centered is-inline-block">
                <button class="button is-info" @click="slidePrev">PREV</button>
                <button class="button is-info" @click="slideNext">NEXT</button>
            </div>
    </div>
</template>

<script>
import {
  Hooper,
  Slide,
  Pagination as HooperPagination,
  Navigation as HooperNavigation
} from "hooper";
import "hooper/dist/hooper.css";

import slideTemplate from "./slide-template.vue";
import { slideShowsRef } from "./utils.js";

export default {
  data() {
    return {
      sliderRef: "SlideShow 1",
      slideList: [],
      hooperSettings: {
        autoPlay: false,
        centerMode: true,
        progress: true
      },
      hooperStyle: {
        height: "265px"
      }
    };
  },
  methods: {
    slidePrev() {
      this.$refs.carousel.slidePrev();
    },
    slideNext() {
      this.$refs.carousel.slideNext();
    },

    //Removes slider identified by IDX
    removeCurrSlide(idx) {
      this.slideList.splice(idx, 1);
    },

    // Fetch data from firebase
    getSliderData() {
      let that = this;
      let mySliderRef = slideShowsRef.child(this.sliderRef);
      mySliderRef.once("value", snap => {
        if (snap.val()) {
          this.slideList = [];
          snap.forEach(childSnapshot => {
            that.slideList.push(childSnapshot.val());
          });
        }
      });
    }
  },
  watch: {
    getSlider: {
      handler: "getSliderData",
      immediate: true
    }
  },
  components: {
    slideTemplate,
    Hooper,
    Slide,
    HooperPagination,
    HooperNavigation
  }
};
</script>

components/slide-template.vue (child, with vue2-dropzone)

<template>
    <div class="slide-wrapper">
        <slideTitle :heading="slideItem.heading" />
        <a class="button delete remove-curr-slide" @click="deleteCurrSlide(slideIDX)" ></a>
    
            <vue2Dropzone
                @vdropzone-file-added="fileWasAdded"
                @vdropzone-thumbnail="thumbnail"
                @vdropzone-mounted="manuallyAddFiles(slideItem.zones)"
                :destroyDropzone="false"
                :include-styling="false"
                :ref="`dropZone${ slideIDX }`"
                :id="`customDropZone${ slideIDX }`"
                :options="dropzoneOptions">
            </vue2Dropzone>
    </div>
</template>

<script>
import slideTitle from "./slide-title.vue";
import vue2Dropzone from "@dkjain/vue2-dropzone";
import { generate_ObjURLfromImageStream, asyncForEach } from "./utils.js";

export default {
  props: ["slideIDX", "slideItem", "removeSlideFn"],
  data() {
    return {
      dropzoneOptions: {
        url: "https://vuejs-slider-node-lokijs-api.herokuapp.com/imageUpload",
        thumbnailWidth: 150,
        autoProcessQueue: false,
        maxFiles: 1,
        maxFilesize: 2,
        addRemoveLinks: true,
        previewTemplate: this.template()
      }
    };
  },
  components: {
    slideTitle,
    vue2Dropzone
  },
  methods: {
    template: function() {
      return `<div class="dz-preview dz-file-preview">
                        <div class="dz-image">
                            <img data-dz-thumbnail/>
                        </div>
                        <div class="dz-details">
                            <!-- <div class="dz-size"><span data-dz-size></span></div> -->
                            
                            <!-- <div class="dz-filename"><span data-dz-name></span></div>  -->
                        </div>
                        <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
                        <div class="dz-error-message"><span data-dz-errormessage></span></div>
                        <div class="dz-success-mark"><i class="fa fa-check"></i></div>
                        <div class="dz-error-mark"><i class="fa fa-close"></i></div>
                    </div>`;
    },
    thumbnail: function(file, dataUrl) {
      var j, len, ref, thumbnailElement;
      if (file.previewElement) {
        file.previewElement.classList.remove("dz-file-preview");
        ref = file.previewElement.querySelectorAll("[data-dz-thumbnail]");
        for (j = 0, len = ref.length; j < len; j++) {
          thumbnailElement = ref[j];
          thumbnailElement.alt = file.name;
        }
        thumbnailElement.src = dataUrl;
        return setTimeout(
          (function(_this) {
            return function() {
              return file.previewElement.classList.add("dz-image-preview");
            };
          })(this),
          1
        );
      }
    },
    // Drag & Drop Events
    async manuallyAddFiles(zoneData) {
      if (zoneData) {
        let dropZone = `dropZone${this.slideIDX}`;

        asyncForEach(zoneData, async fileInfo => {
          var mockFile = {
            size: fileInfo.size,
            name: fileInfo.originalName || fileInfo.name,
            type: fileInfo.type,
            id: fileInfo.id,
            childZoneId: fileInfo.childZoneId
          };
          let url = `https://vuejs-slider-node-lokijs-api.herokuapp.com/images/${
            fileInfo.id
          }`;

          let objURL = await generate_ObjURLfromImageStream(url);
          this.$refs[dropZone].manuallyAddFile(mockFile, objURL);
        });
      }
    },

    fileWasAdded(file) {
      console.log("Successfully Loaded Files from Server");
    },

    deleteCurrSlide(idx) {
      this.removeSlideFn(idx);
    }
  }
};
</script>

<style lang="scss">
.slide-wrapper {
  position: relative;
}
[id^="customDropZone"] {
  background-color: orange;
  font-family: "Arial", sans-serif;
  letter-spacing: 0.2px;
  /* color: #777; */
  transition: background-color 0.2s linear;
  //   height: 200px;
  padding: 40px;
}

[id^="customDropZone"] .dz-preview {
  width: 160px;
  display: inline-block;
}
[id^="customDropZone"] .dz-preview .dz-image {
  width: 80px;
  height: 80px;
  margin-left: 40px;
  margin-bottom: 10px;
}
[id^="customDropZone"] .dz-preview .dz-image > div {
  width: inherit;
  height: inherit;
  //   border-radius: 50%;
  background-size: contain;
}
[id^="customDropZone"] .dz-preview .dz-image > img {
  width: 100%;
}

[id^="customDropZone"] .dz-preview .dz-details {
  color: white;
  transition: opacity 0.2s linear;
  text-align: center;
}
[id^="customDropZone"] .dz-success-mark,
.dz-error-mark {
  display: none;
}
.dz-size {
  border: 2px solid blue;
}

#previews {
  border: 2px solid red;
  min-height: 50px;
  z-index: 9999;
}

.button.delete.remove-curr-slide {
  padding: 12px;
  margin-top: 5px;
  margin-left: 5px;
  position: absolute;
  right: 150px;
  background-color: red;
}
</style>

slide-title.vue (not that important)

<template>
    <h2 contenteditable @blur="save"> {{ heading }} </h2>
</template>

<script>
export default {
  props: ["heading"],
  methods: {
    save() {
      this.$emit("onTitleUpdate", event.target.innerText.trim());
    }
  }
};
</script>

utils.js (utility)

export async function generate_ObjURLfromImageStream(url) {
  return await fetch(url)
    .then(response => {
      return response.body;
    })
    .then(rs => {
      const reader = rs.getReader();

      return new ReadableStream({
        async start(controller) {
          while (true) {
            const { done, value } = await reader.read();

            // When no more data needs to be consumed, break the reading
            if (done) {
              break;
            }

            // Enqueue the next data chunk into our target stream
            controller.enqueue(value);
          }

          // Close the stream
          controller.close();
          reader.releaseLock();
        }
      });
    })
    // Create a new response out of the stream
    .then(rs => new Response(rs))
    // Create an object URL for the response
    .then(response => {
      return response.blob();
    })
    .then(blob => {
      // generate a objectURL (blob:url/<uuid> list)
      return URL.createObjectURL(blob);
    })
    .catch(console.error);
}

Technically this is how the app works, slider.vue loads & fetches data from database (firebase) and stores in a data array slideList, loops over the slideList & passes each slideData (prop slideItem) to vue-dropzone component (in slide-template.vue), when dropzone mounts it fires the manuallyAddFiles(slideItem.zones) on the @vdropzone-mounted custom event.

The async manuallyAddFiles() fetches image from an API (hosted on heroku), creates (generate_ObjURLfromImageStream(url)) a unique blob URL for the image (blob:/) and then calls plugins API dropZone.manuallyAddFile() to load the image into the corresponding dropzone.

To delete the current slide, child's deleteCurrSlide() calls parent's (slider.vue) removeSlideFn (passed as prop) method with the idx of current slide. The removeSlideFn use splice to remove the item at the corresponding array idx this.slideList.splice(idx, 1).

The problem is when I delete the first slide, first slide is deleted but not entirely, the dropzone images of the first slides are not destroyed and still remains in the DOM, instead the images of slide2, (the next slide) are deleted from the DOM.

CodeSandBox Demo

I am not sure what is causing the issue, may it's due to something in the vue's reactivity system OR Vue's Array reactivity caveat that is causing this.

Can anybody pls help me understand & resolve this and if possible point out the reason to the root of the problem.

Your help is much appreciated.

Thanks,

Answer 1

I think you probably missunderstand what is going on:

In VueJS there is a caching method which allow the reusing of existing component generated: - Each of your object are considered equals when rendered (at a DOM level).

So VueJS remove the last line because it is probably ask the least calculation and then recalcul the expected state. There are many side case to this (sometime, the local state is not recalculated). To avoir this: As recommended in the documentation, use :key to trace the id of your object. From the documentation:

When Vue is updating a list of elements rendered with v-for, by default it uses an “in-place patch” strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will patch each element in-place and make sure it reflects what should be rendered at that particular index. This is similar to the behavior of track-by="$index" in Vue 1.x.

This default mode is efficient, but only suitable when your list render output does not rely on child component state or temporary DOM state (e.g. form input values).

To give Vue a hint so that it can track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item. An ideal value for key would be the unique id of each item. This special attribute is a rough equivalent to track-by in 1.x, but it works like an attribute, so you need to use v-bind to bind it to dynamic values...

new Vue({
    el: "#app",
    data: {
        counterrow: 1,
        rows: [],
    },
    methods: {
        addrow: function() {
            this.counterrow += 1;
            this.rows.push({
                id: this.counterrow,
                model: ""
            });
        },
        removerows: function(index) {
            this.rows.splice(index, 1);
        },
    },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
    <table>
        <tr>
            <td><input type="text" name="test1" /></td>
            <td><button class="btn" @click="addrow">add row</button></td>
        </tr>
        <tr v-for="(row,index) in rows" :key="row.id">
            <td><input type="text" name="test2" v-model="row.model" /></td>
            <td><button class="btn" @click="removerows(index)">remove </button></td>
        </tr>
    </table>
</div>

In this code:

I corrected the fact counterrow was never incremented I added a :key

The documentation of :key

Answer 2

What did you mean by

The problem is when I delete the first slide, first slide is deleted but not entirely, the dropzone images of the first slides are not destroyed and still remains in the DOM, instead the images of slide2, (the next slide) are deleted from the DOM.

From what I see, the elements are no longer in the DOM