fix: use post flush in modal example

vuejs · Sep 20, 2020 · 2024281 · 2024281
1 parent 3234c59
commit 2024281
Show file tree

Hide file tree

Showing 2 changed files with 163 additions and 65 deletions.
diff --git a/e2e/modal/index.ts b/e2e/modal/index.ts
@@ -25,6 +25,11 @@ async function showUserModal(id: number) {
     params: { id: '' + id },
     state: { backgroundView },
   })
+  const newState = {
+    ...window.history.state,
+    backgroundView,
+  }
+  window.history.replaceState(newState, '')
 }
 
 function closeUserModal() {
@@ -64,20 +69,23 @@ const Home = defineComponent({
 
     const userId = computed(() => route.params.id)
 
-    watchEffect(() => {
-      const el = modal.value
-      if (!el) return
-
-      const show = historyState.value.backgroundView
-      console.log('show modal?', show)
-      if (show) {
-        if ('show' in el) el.show()
-        else el.setAttribute('open', '')
-      } else {
-        if ('close' in el) el.close()
-        else el.removeAttribute('open')
-      }
-    })
+    watchEffect(
+      () => {
+        const el = modal.value
+        if (!el) return
+
+        const show = historyState.value.backgroundView
+        console.log('show modal?', show)
+        if (show) {
+          if ('show' in el) el.show()
+          else el.setAttribute('open', '')
+        } else {
+          if ('close' in el) el.close()
+          else el.removeAttribute('open')
+        }
+      },
+      { flush: 'post' }
+    )
 
     return {
       modal,