fix(runtime-dom): fix v-show conflicts with style display binding

iBelieveLove · Oct 11, 2021 · 42396db · 42396db
1 parent 7bb9dd0
commit 42396db
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 11 deletions.
diff --git a/packages/runtime-dom/src/directives/vShow.ts b/packages/runtime-dom/src/directives/vShow.ts
@@ -20,7 +20,11 @@ export const vShow: ObjectDirective<VShowElement> = {
     }
   },
   updated(el, { value, oldValue }, { transition }) {
-    if (!value === !oldValue) return
+    if (!value === !oldValue) {
+      el._vod = el.style.display === 'none' ? '' : el.style.display
+      setDisplay(el, value);
+      return;
+    }
     if (transition) {
       if (value) {
         transition.beforeEnter(el)

diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts
@@ -7,31 +7,24 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
   const style = (el as HTMLElement).style
   const isCssString = isString(next)
   if (next && !isCssString) {
-    for (const key in next) {
-      setStyle(style, key, next[key])
+    for (const key in (next as Record<string, string | string[]>)) {
+      setStyle(style, key, (next as Record<string, string | string[]>)[key])
     }
     if (prev && !isString(prev)) {
       for (const key in prev) {
-        if (next[key] == null) {
+        if ((next as Record<string, string | string[]>)[key] == null) {
           setStyle(style, key, '')
         }
       }
     }
   } else {
-    const currentDisplay = style.display
     if (isCssString) {
       if (prev !== next) {
         style.cssText = next as string
       }
     } else if (prev) {
       el.removeAttribute('style')
     }
-    // indicates that the `display` of the element is controlled by `v-show`,
-    // so we always keep the current `display` value regardless of the `style`
-    // value, thus handing over control to `v-show`.
-    if ('_vod' in el) {
-      style.display = currentDisplay
-    }
   }
 }