From 1eefb09ca67d1cb590786e3bc88d2604e18fe4bc Mon Sep 17 00:00:00 2001
From: unknown <poziomkaa@gmail.com>
Date: Mon, 24 May 2021 20:55:22 +0200
Subject: [PATCH] feat: Add posibilty to reset component after content change

---
 src/App.vue                  | 20 +++++++++++++++++++-
 src/components/Component.vue | 24 ++++++++++--------------
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4b988cc..47b18d2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <template>
   <VEndlessScroll
     :state="state"
+    :identifier="identifier"
     class="example"
     @feed-me="feedIt"
   >
@@ -10,6 +11,7 @@
       {{line}}<br>
     </span>
   </VEndlessScroll>
+  <button @click="reset">Reset</button>
 </template>
 
 <script lang="ts">
@@ -29,7 +31,8 @@ export default defineComponent({
         'pierwsza linia',
         'druga linia',
         'trzecia linia'
-      ]
+      ],
+      identifier: 1
     }
   },
   methods: {
@@ -43,6 +46,21 @@ export default defineComponent({
       } else {
         this.state = InifiniteScrollState.COMPLETE
       }
+    },
+    reset (): void {
+      this.lines = [
+        'pierwsza linia',
+        'druga linia',
+        'trzecia linia',
+        'pierwsza linia',
+        'druga linia',
+        'trzecia linia',
+        'pierwsza linia',
+        'druga linia',
+        'trzecia linia'
+      ]
+      this.state = InifiniteScrollState.LOADED
+      this.identifier++
     }
   }
 })
diff --git a/src/components/Component.vue b/src/components/Component.vue
index 34d48b6..2dd4eff 100644
--- a/src/components/Component.vue
+++ b/src/components/Component.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, onMounted, onBeforeUnmount, ref, toRefs } from 'vue'
+import { defineComponent, PropType, onMounted, onBeforeUnmount, ref, toRefs, watch } from 'vue'
 import { InifiniteScrollState } from './models'
 
 export default defineComponent({
@@ -70,6 +70,8 @@ export default defineComponent({
     let observer = null as any
     const container = ref(null)
     const end = ref(null)
+    const { state, identifier } = toRefs(props)
+
     const setObserver = (): void => {
       const options = {
         root: container.value,
@@ -86,8 +88,6 @@ export default defineComponent({
       observer.observe(end.value!)
     }
 
-    const { state } = toRefs(props)
-
     const handleScroll = (): void => {
       if (state.value === InifiniteScrollState.LOADED) {
         emit('feed-me')
@@ -97,6 +97,13 @@ export default defineComponent({
       }
     }
 
+    const reset = (): void => {
+      (container.value! as HTMLElement).scrollTop = 0
+      setObserver()
+    }
+
+    watch(identifier, reset)
+
     onMounted(() => {
       setObserver()
     })
@@ -121,17 +128,6 @@ export default defineComponent({
     isError (): boolean {
       return this.state === InifiniteScrollState.ERROR
     }
-  },
-  methods: {
-
-    reset (): void {
-      (this.$refs.container as HTMLElement).scrollTop = 0
-    },
-    setIdentifierReset (): void {
-      if (this.identifier !== null) {
-        this.$watch('identifier', this.reset)
-      }
-    }
   }
 })
 </script>