From 7d6a97838b701c377a7730bdd55a4a4c1c66eb83 Mon Sep 17 00:00:00 2001
From: zhangshuai <shuai.zhang@chelaile.net.cn>
Date: Wed, 16 Mar 2022 16:41:00 +0800
Subject: [PATCH] fix: Ref or computed inside non-wrappable variables (objects,
 arrays) should return a string without quotes(#5587)

---
 packages/shared/__tests__/toDisplayString.spec.ts | 3 +++
 packages/shared/src/toDisplayString.ts            | 6 +++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/shared/__tests__/toDisplayString.spec.ts b/packages/shared/__tests__/toDisplayString.spec.ts
index 53cfcb87a1f..1af81b8cefe 100644
--- a/packages/shared/__tests__/toDisplayString.spec.ts
+++ b/packages/shared/__tests__/toDisplayString.spec.ts
@@ -70,6 +70,9 @@ describe('toDisplayString', () => {
         np
       })
     ).toBe(JSON.stringify({ n: 1, np: 2 }, null, 2))
+    // #5578
+    const nums = [ref('text')]
+    expect(toDisplayString(nums[0])).toBe('text')
   })
 
   test('objects with custom toString', () => {
diff --git a/packages/shared/src/toDisplayString.ts b/packages/shared/src/toDisplayString.ts
index efe3b7cc0e8..51e81767436 100644
--- a/packages/shared/src/toDisplayString.ts
+++ b/packages/shared/src/toDisplayString.ts
@@ -13,7 +13,11 @@ import {
  * For converting {{ interpolation }} values to displayed strings.
  * @private
  */
-export const toDisplayString = (val: unknown): string => {
+export const toDisplayString = (val: any): string => {
+  //fix #5578
+  if (val && val.__v_isRef) {
+    return toDisplayString(val.value)
+  }
   return isString(val)
     ? val
     : val == null