fix(compiler-core): Fix the 'constType' error when using 'v-bind' to …

…bind array variables to 'style', resulting in runtime errors(fix vuejs#5106)
baiwusanyu-c · May 11, 2022 · 2f144a1 · 2f144a1
1 parent 58e6bc7
commit 2f144a1
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 20 deletions.
diff --git a/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts b/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts
@@ -99,23 +99,7 @@ describe('compiler: expression transform', () => {
       content: `_ctx.baz`
     })
   })
-  // fix: #5106
-  test('directive value is array', () => {
-    const node = parseWithExpressionTransform(
-      `<div v-foo:arg="[1]"/>`
-    ) as ElementNode
-    const arg = (node.props[0] as DirectiveNode).arg!
-    expect(arg).toMatchObject({
-      type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `arg`
-    })
-    const exp = (node.props[0] as DirectiveNode).exp!
-    expect(exp).toMatchObject({
-      type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `[1]`,
-      constType:ConstantTypes.NOT_CONSTANT
-    })
-  })
+
   test('dynamic directive arg', () => {
     const node = parseWithExpressionTransform(
       `<div v-foo:[arg]="baz"/>`

diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -60,11 +60,15 @@ export const transformExpression: NodeTransform = (node, context) => {
           exp.type === NodeTypes.SIMPLE_EXPRESSION &&
           !(dir.name === 'on' && arg)
         ) {
+          const isBindStyle = dir.name === 'bind' && arg && (arg as SimpleExpressionNode).content && (arg as SimpleExpressionNode).content === 'style'
           dir.exp = processExpression(
             exp,
             context,
             // slot args must be processed as function params
-            dir.name === 'slot'
+            dir.name === 'slot',
+            false,
+            Object.create(context.identifiers),
+            (isBindStyle ? true : false)
           )
         }
         if (arg && arg.type === NodeTypes.SIMPLE_EXPRESSION && !arg.isStatic) {
@@ -94,7 +98,8 @@ export function processExpression(
   asParams = false,
   // v-on handler values may contain multiple statements
   asRawStatements = false,
-  localVars: Record<string, number> = Object.create(context.identifiers)
+  localVars: Record<string, number> = Object.create(context.identifiers),
+  isBindStyle:boolean | undefined = false,
 ): ExpressionNode {
   if (__BROWSER__) {
     if (__DEV__) {
@@ -210,7 +215,7 @@ export function processExpression(
   // bail constant on parens (function invocation) and dot (member access)
   // fix: #5106
   const rawExpTrim = node.content.trim();
-  const bailConstant = rawExp.indexOf(`(`) > -1 || rawExp.indexOf('.') > 0 || (rawExpTrim[0] === '[' && rawExpTrim[rawExpTrim.length - 1] === ']')
+  const bailConstant = rawExp.indexOf(`(`) > -1 || rawExp.indexOf('.') > 0 || (rawExpTrim[0] === '[' && rawExpTrim[rawExpTrim.length - 1] === ']' && isBindStyle)
 
   if (isSimpleIdentifier(rawExp)) {
     const isScopeVarReference = context.identifiers[rawExp]