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

fix #2430
This commit is contained in:
Eduardo San Martin Morote 2020-10-20 00:12:09 +02:00 committed by GitHub
parent edd49dcab4
commit 314ab2c7c5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 7 deletions

View File

@ -5,10 +5,12 @@ exports[`compile should contain standard transforms 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { 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, [ 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\\", { innerHTML: html }, null, 8 /* PROPS */, [\\"innerHTML\\"]),
_createVNode(\\"div\\", null, \\"test\\"), _createVNode(\\"div\\", null, \\"test\\"),
_createVNode(\\"div\\", { style: {\\"color\\":\\"red\\"} }, \\"red\\"), _createVNode(\\"div\\", { style: {\\"color\\":\\"red\\"} }, \\"red\\"),

View File

@ -31,7 +31,9 @@ describe('compiler: v-text transform', () => {
expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({ expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
tag: `"div"`, tag: `"div"`,
props: createObjectMatcher({ props: createObjectMatcher({
textContent: `[test]` textContent: {
arguments: [{ content: 'test' }]
}
}), }),
children: undefined, children: undefined,
patchFlag: genFlagText(PatchFlags.PROPS), patchFlag: genFlagText(PatchFlags.PROPS),
@ -50,7 +52,9 @@ describe('compiler: v-text transform', () => {
expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({ expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
tag: `"div"`, tag: `"div"`,
props: createObjectMatcher({ props: createObjectMatcher({
textContent: `[test]` textContent: {
arguments: [{ content: 'test' }]
}
}), }),
children: undefined, // <-- children should have been removed children: undefined, // <-- children should have been removed
patchFlag: genFlagText(PatchFlags.PROPS), patchFlag: genFlagText(PatchFlags.PROPS),

View File

@ -1,7 +1,9 @@
import { import {
DirectiveTransform, DirectiveTransform,
createObjectProperty, createObjectProperty,
createSimpleExpression createSimpleExpression,
TO_DISPLAY_STRING,
createCallExpression
} from '@vue/compiler-core' } from '@vue/compiler-core'
import { createDOMCompilerError, DOMErrorCodes } from '../errors' import { createDOMCompilerError, DOMErrorCodes } from '../errors'
@ -21,8 +23,14 @@ export const transformVText: DirectiveTransform = (dir, node, context) => {
return { return {
props: [ props: [
createObjectProperty( createObjectProperty(
createSimpleExpression(`textContent`, true, loc), createSimpleExpression(`textContent`, true),
exp || createSimpleExpression('', true) exp
? createCallExpression(
context.helperString(TO_DISPLAY_STRING),
[exp],
loc
)
: createSimpleExpression('', true)
) )
] ]
} }