diff --git a/packages/shared/__tests__/toDisplayString.spec.ts b/packages/shared/__tests__/toDisplayString.spec.ts index ef5030239b4..6bcc200c8d5 100644 --- a/packages/shared/__tests__/toDisplayString.spec.ts +++ b/packages/shared/__tests__/toDisplayString.spec.ts @@ -64,6 +64,11 @@ describe('toDisplayString', () => { ) }) + test('ref with String', () => { + const n = ref('foo') + expect(toDisplayString(n)).toBe(n.value) + }) + test('refs', () => { const n = ref(1) const np = computed(() => n.value + 1) diff --git a/packages/shared/src/toDisplayString.ts b/packages/shared/src/toDisplayString.ts index b63cb4112a5..663710d69b4 100644 --- a/packages/shared/src/toDisplayString.ts +++ b/packages/shared/src/toDisplayString.ts @@ -17,18 +17,19 @@ import { export const toDisplayString = (val: unknown): string => { return isString(val) ? val - : val == null - ? '' - : isArray(val) || - (isObject(val) && - (val.toString === objectToString || !isFunction(val.toString))) - ? JSON.stringify(val, replacer, 2) - : String(val) + : isRef(val) + ? toDisplayString(val.value) + : val == null + ? '' + : isArray(val) || + (isObject(val) && + (val.toString === objectToString || !isFunction(val.toString))) + ? JSON.stringify(val, replacer, 2) + : String(val) } const replacer = (_key: string, val: any): any => { - // can't use isRef here since @vue/shared has no deps - if (val && val.__v_isRef) { + if (isRef(val)) { return replacer(_key, val.value) } else if (isMap(val)) { return { @@ -53,6 +54,9 @@ const replacer = (_key: string, val: any): any => { return val } +// can't use isRef from @vue/reactivity here since @vue/shared has no deps +const isRef = (val: any): val is { value: any } => val && val.__v_isRef + const stringifySymbol = (v: unknown, i: number | string = ''): any => // Symbol.description in es2019+ so we need to cast here to pass // the lib: es2016 check