add: automatic update mechanism

Author: YasinChan

index.js

@@ -22,5 +22,8 @@
     "rollup-plugin-vue": "^5.1.6",
     "vue": "^2.6.11",
     "vue-template-compiler": "^2.6.11"
+  },
+  "dependencies": {
+    "nanoid": "^2.1.11"
   }
 }

package.json

@@ -1,3 +1,4 @@
+import nanoId from 'nanoid'
 const DEFAULT_OBSERVER_OPTIONS = {
   rootMargin: '0px',
   threshold: 0
@@ -17,14 +18,18 @@ class Lazy {
     )
   }
   add(el, binding, vnode) {
+    vnode.key = nanoId(4)
     this.ListenerQueue.push({
       loaded: false,
       el,
       binding,
       vnode
     })
     this.vue.nextTick(() => {
-      this.observer && this.observer.observe(el)
+      if (this.observer) {
+        this.observer.unobserve(el)
+        this.observer.observe(el)
+      }
     })
   }
   observerHandler(entries, observer) {
@@ -46,6 +51,7 @@ class Lazy {
               }
               image.onerror = function() {}
             } else {
+              // debugger
               const img = listener.el.querySelector('img')
               if (!img) {
                 throw 'Please make sure that you have set img html inside v-lazy directive. [more details] https://github.com/YasinChan/vue-simple-lazyload/blob/master/README.md'

src/lazyload.js

@@ -6,7 +6,8 @@ export const VueLazy = {
     const lazy = new Lazy(Vue, options)
 
     Vue.directive('lazy', {
-      bind: lazy.add.bind(lazy)
+      bind: lazy.add.bind(lazy),
+      update: lazy.add.bind(lazy)
     })
   }
 }
@@ -16,7 +17,8 @@ export const VueImgLazy = {
     const lazy = new Lazy(Vue, options)
 
     Vue.directive('lazy', {
-      bind: lazy.add.bind(lazy)
+      bind: lazy.add.bind(lazy),
+      update: lazy.add.bind(lazy)
     })
     Vue.component(ImgLazy.name, ImgLazy)
   }