Fix for NumberFlowGroup and v-if

barvian · Nov 14, 2024 · a57700c · a57700c
1 parent 6f164d5
commit a57700c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/.changeset/dry-pianos-travel.md b/.changeset/dry-pianos-travel.md
@@ -0,0 +1,6 @@
+---
+'number-flow': patch
+'@number-flow/vue': patch
+---
+
+Fix for `<NumberFlowGroup>` and v-if
diff --git a/packages/number-flow/src/index.ts b/packages/number-flow/src/index.ts
@@ -87,6 +87,10 @@ export class NumberFlowLite extends ServerSafeHTMLElement implements Props {
 	}
 
 	#created = false
+	get created() {
+		return this.#created
+	}
+
 	#pre?: SymbolSection
 	#num?: Num
 	#post?: SymbolSection

diff --git a/packages/vue/src/NumberFlowGroup.vue b/packages/vue/src/NumberFlowGroup.vue
@@ -14,13 +14,14 @@ const registerWithGroup: RegisterWithGroup = (el, parts) => {
 		async () => {
 			if (updating) return
 			updating = true
-			flows.forEach((flow) => {
-				flow.value?.willUpdate()
-			})
-			await nextTick()
-			flows.forEach((flow) => {
+			flows.forEach(async (flow) => {
+				if (!flow.value || !flow.value.created) return
+				flow.value.willUpdate()
+				await nextTick()
+				// Optional in case the element was removed after tick:
 				flow.value?.didUpdate()
 			})
+			await nextTick()
 			updating = false
 		}
 		// { flush: 'pre' } // default