fix(compiler): stringify values on v-text (#2432)

fix #2430

diff --git a/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap b/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
index 40e14d51f1857e2a1db4d4df7c2fb39be2765e03..c094979fcd3ae99a7a7d9ec3ff647309ee26bb75 100644 (file)
--- a/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
@@ -5,10 +5,12 @@ exports[`compile should contain standard transforms 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createVNode: _createVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { toDisplayString: _toDisplayString, createVNode: _createVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(_Fragment, null, [
-      _createVNode(\\"div\\", { textContent: text }, null, 8 /* PROPS */, [\\"textContent\\"]),
+      _createVNode(\\"div\\", {
+        textContent: _toDisplayString(text)
+      }, null, 8 /* PROPS */, [\\"textContent\\"]),
       _createVNode(\\"div\\", { innerHTML: html }, null, 8 /* PROPS */, [\\"innerHTML\\"]),
       _createVNode(\\"div\\", null, \\"test\\"),
       _createVNode(\\"div\\", { style: {\\"color\\":\\"red\\"} }, \\"red\\"),

diff --git a/packages/compiler-dom/__tests__/transforms/vText.spec.ts b/packages/compiler-dom/__tests__/transforms/vText.spec.ts
index de31fdd44a429a7abe799ca06565ef9f0eebdc53..75dbda31fd10d29944a6208ecc22672265f6c364 100644 (file)
--- a/packages/compiler-dom/__tests__/transforms/vText.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vText.spec.ts
@@ -31,7 +31,9 @@ describe('compiler: v-text transform', () => {
     expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
       tag: `"div"`,
       props: createObjectMatcher({
-        textContent: `[test]`
+        textContent: {
+          arguments: [{ content: 'test' }]
+        }
       }),
       children: undefined,
       patchFlag: genFlagText(PatchFlags.PROPS),
@@ -50,7 +52,9 @@ describe('compiler: v-text transform', () => {
     expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
       tag: `"div"`,
       props: createObjectMatcher({
-        textContent: `[test]`
+        textContent: {
+          arguments: [{ content: 'test' }]
+        }
       }),
       children: undefined, // <-- children should have been removed
       patchFlag: genFlagText(PatchFlags.PROPS),

diff --git a/packages/compiler-dom/src/transforms/vText.ts b/packages/compiler-dom/src/transforms/vText.ts
index 0969ce95ecc53fafc206ec03767180a1ac5cc09f..862d2c2040cc54c6006d1e86ad0e1a9d7cf1e235 100644 (file)
--- a/packages/compiler-dom/src/transforms/vText.ts
+++ b/packages/compiler-dom/src/transforms/vText.ts
@@ -1,7 +1,9 @@
 import {
   DirectiveTransform,
   createObjectProperty,
-  createSimpleExpression
+  createSimpleExpression,
+  TO_DISPLAY_STRING,
+  createCallExpression
 } from '@vue/compiler-core'
 import { createDOMCompilerError, DOMErrorCodes } from '../errors'
 
@@ -21,8 +23,14 @@ export const transformVText: DirectiveTransform = (dir, node, context) => {
   return {
     props: [
       createObjectProperty(
-        createSimpleExpression(`textContent`, true, loc),
-        exp || createSimpleExpression('', true)
+        createSimpleExpression(`textContent`, true),
+        exp
+          ? createCallExpression(
+              context.helperString(TO_DISPLAY_STRING),
+              [exp],
+              loc
+            )
+          : createSimpleExpression('', true)
       )
     ]
   }