fix(compiler-core): normalize v-bind:style with array literal value

fix #5106
This commit is contained in:
Evan You 2022-05-12 16:31:16 +08:00
parent 59cf2958e7
commit 0f00cf43cf
2 changed files with 33 additions and 1 deletions

View File

@ -807,6 +807,37 @@ describe('compiler: element transform', () => {
}) })
}) })
test(':style with array literal', () => {
const { node, root } = parseWithElementTransform(
`<div :style="[{ color: 'red' }]" />`,
{
nodeTransforms: [transformExpression, transformStyle, transformElement],
directiveTransforms: {
bind: transformBind
},
prefixIdentifiers: true
}
)
expect(root.helpers).toContain(NORMALIZE_STYLE)
expect(node.props).toMatchObject({
type: NodeTypes.JS_OBJECT_EXPRESSION,
properties: [
{
type: NodeTypes.JS_PROPERTY,
key: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `style`,
isStatic: true
},
value: {
type: NodeTypes.JS_CALL_EXPRESSION,
callee: NORMALIZE_STYLE
}
}
]
})
})
test(`props merging: class`, () => { test(`props merging: class`, () => {
const { node, root } = parseWithElementTransform( const { node, root } = parseWithElementTransform(
`<div class="foo" :class="{ bar: isBar }" />`, `<div class="foo" :class="{ bar: isBar }" />`,

View File

@ -767,10 +767,11 @@ export function buildProps(
} }
if ( if (
styleProp && styleProp &&
!isStaticExp(styleProp.value) &&
// the static style is compiled into an object, // the static style is compiled into an object,
// so use `hasStyleBinding` to ensure that it is a dynamic style binding // so use `hasStyleBinding` to ensure that it is a dynamic style binding
(hasStyleBinding || (hasStyleBinding ||
(styleProp.value.type === NodeTypes.SIMPLE_EXPRESSION &&
styleProp.value.content.trim()[0] === `[`) ||
// v-bind:style and style both exist, // v-bind:style and style both exist,
// v-bind:style with static literal object // v-bind:style with static literal object
styleProp.value.type === NodeTypes.JS_ARRAY_EXPRESSION) styleProp.value.type === NodeTypes.JS_ARRAY_EXPRESSION)