Remove event listeners when destory ImageCropper

src/components/image_cropper/image_cropper.js

@@ -65,19 +65,12 @@ const ImageCropper = {
     },
     createCropper () {
       this.cropper = new Cropper(this.$refs.img, this.cropperOptions)
-    }
     },
-  mounted () {
+    getTriggerDOM () {
-    // listen for click event on trigger
+      return typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger)
-    let trigger = typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger)
+    },
-    if (!trigger) {
+    readFile () {
-      this.$emit('error', 'No image make trigger found.', 'user')
+      const fileInput = this.$refs.input
-    } else {
-      trigger.addEventListener('click', this.pickImage)
-    }
-    // listen for input file changes
-    let fileInput = this.$refs.input
-    fileInput.addEventListener('change', () => {
       if (fileInput.files != null && fileInput.files[0] != null) {
         let reader = new FileReader()
         reader.onload = (e) => {
@@ -87,7 +80,28 @@ const ImageCropper = {
         this.filename = fileInput.files[0].name || 'unknown'
         this.$emit('changed', fileInput.files[0], reader)
       }
-    })
+    }
+  },
+  mounted () {
+    // listen for click event on trigger
+    const trigger = this.getTriggerDOM()
+    if (!trigger) {
+      this.$emit('error', 'No image make trigger found.', 'user')
+    } else {
+      trigger.addEventListener('click', this.pickImage)
+    }
+    // listen for input file changes
+    const fileInput = this.$refs.input
+    fileInput.addEventListener('change', this.readFile)
+  },
+  beforeDestroy: function () {
+    // remove the event listeners
+    const trigger = this.getTriggerDOM()
+    if (trigger) {
+      trigger.removeEventListener('click', this.pickImage)
+    }
+    const fileInput = this.$refs.input
+    fileInput.removeEventListener('change', this.readFile)
   }
 }