diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts index da00d763599..6caa2442e18 100644 --- a/packages/runtime-core/__tests__/hydration.spec.ts +++ b/packages/runtime-core/__tests__/hydration.spec.ts @@ -26,7 +26,7 @@ import { } from '@vue/runtime-dom' import { type SSRContext, renderToString } from '@vue/server-renderer' import { PatchFlags } from '@vue/shared' -import { vShowOldKey } from '../../runtime-dom/src/directives/vShow' +import { vShowOriginalDisplay } from '../../runtime-dom/src/directives/vShow' function mountWithHydration(html: string, render: () => any) { const container = document.createElement('div') @@ -1252,7 +1252,7 @@ describe('SSR hydration', () => { foo `) - expect((container.firstChild as any)[vShowOldKey]).toBe('') + expect((container.firstChild as any)[vShowOriginalDisplay]).toBe('') expect(vnode.el).toBe(container.firstChild) expect(`mismatch`).not.toHaveBeenWarned() }) diff --git a/packages/runtime-dom/src/directives/vShow.ts b/packages/runtime-dom/src/directives/vShow.ts index 4bf6779edfd..5bf48b277d9 100644 --- a/packages/runtime-dom/src/directives/vShow.ts +++ b/packages/runtime-dom/src/directives/vShow.ts @@ -1,15 +1,16 @@ import type { ObjectDirective } from '@vue/runtime-core' -export const vShowOldKey = Symbol('_vod') +export const vShowOriginalDisplay = Symbol('_vod') interface VShowElement extends HTMLElement { // _vod = vue original display - [vShowOldKey]: string + [vShowOriginalDisplay]: string } export const vShow: ObjectDirective & { name?: 'show' } = { beforeMount(el, { value }, { transition }) { - el[vShowOldKey] = el.style.display === 'none' ? '' : el.style.display + el[vShowOriginalDisplay] = + el.style.display === 'none' ? '' : el.style.display if (transition && value) { transition.beforeEnter(el) } else { @@ -24,7 +25,7 @@ export const vShow: ObjectDirective & { name?: 'show' } = { updated(el, { value, oldValue }, { transition }) { if ( !value === !oldValue && - (el.style.display === el[vShowOldKey] || !value) + (el.style.display === el[vShowOriginalDisplay] || !value) ) return if (transition) { @@ -51,7 +52,7 @@ if (__DEV__) { } function setDisplay(el: VShowElement, value: unknown): void { - el.style.display = value ? el[vShowOldKey] : 'none' + el.style.display = value ? el[vShowOriginalDisplay] : 'none' } // SSR vnode transforms, only used when user includes client-oriented render diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts index 11f7ce1c027..1f45966c3c4 100644 --- a/packages/runtime-dom/src/modules/style.ts +++ b/packages/runtime-dom/src/modules/style.ts @@ -1,6 +1,6 @@ import { capitalize, hyphenate, isArray, isString } from '@vue/shared' import { camelize, warn } from '@vue/runtime-core' -import { vShowOldKey } from '../directives/vShow' +import { vShowOriginalDisplay } from '../directives/vShow' import { CSS_VAR_TEXT } from '../helpers/useCssVars' type Style = string | Record | null @@ -53,8 +53,8 @@ export function patchStyle(el: Element, prev: Style, next: 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 (vShowOldKey in el) { - el[vShowOldKey] = hasControlledDisplay ? style.display : '' + if (vShowOriginalDisplay in el) { + el[vShowOriginalDisplay] = hasControlledDisplay ? style.display : '' style.display = currentDisplay } }