fix(compiler-core): fix v-if key injection with v-on object syntax (#2368)

fix #2366

Author: unbyte

packages/compiler-core/__tests__/transforms/vIf.spec.ts

@@ -4,25 +4,25 @@ import { transformIf } from '../../src/transforms/vIf'
 import { transformElement } from '../../src/transforms/transformElement'
 import { transformSlotOutlet } from '../../src/transforms/transformSlotOutlet'
 import {
-  IfNode,
-  NodeTypes,
-  ElementNode,
-  TextNode,
   CommentNode,
-  SimpleExpressionNode,
   ConditionalExpression,
-  IfConditionalExpression,
-  VNodeCall,
+  ElementNode,
   ElementTypes,
-  IfBranchNode
+  IfBranchNode,
+  IfConditionalExpression,
+  IfNode,
+  NodeTypes,
+  SimpleExpressionNode,
+  TextNode,
+  VNodeCall
 } from '../../src/ast'
 import { ErrorCodes } from '../../src/errors'
-import { CompilerOptions, generate } from '../../src'
+import { CompilerOptions, generate, TO_HANDLERS } from '../../src'
 import {
+  CREATE_COMMENT,
   FRAGMENT,
   MERGE_PROPS,
-  RENDER_SLOT,
-  CREATE_COMMENT
+  RENDER_SLOT
 } from '../../src/runtimeHelpers'
 import { createObjectMatcher } from '../testUtils'
 
@@ -673,4 +673,24 @@ describe('compiler: v-if', () => {
       expect((b1.children[3] as ElementNode).tag).toBe(`p`)
     })
   })
+
+  test('v-on with v-if', () => {
+    const {
+      node: { codegenNode }
+    } = parseWithIfTransform(
+      `<button v-on="{ click: clickEvent }" v-if="true">w/ v-if</button>`
+    )
+
+    expect((codegenNode.consequent as any).props.type).toBe(
+      NodeTypes.JS_CALL_EXPRESSION
+    )
+    expect((codegenNode.consequent as any).props.callee).toBe(MERGE_PROPS)
+    expect(
+      (codegenNode.consequent as any).props.arguments[0].properties[0].value
+        .content
+    ).toBe('0')
+    expect((codegenNode.consequent as any).props.arguments[1].callee).toBe(
+      TO_HANDLERS
+    )
+  })
 })

packages/compiler-core/src/utils.ts

@@ -29,7 +29,8 @@ import {
   TELEPORT,
   SUSPENSE,
   KEEP_ALIVE,
-  BASE_TRANSITION
+  BASE_TRANSITION,
+  TO_HANDLERS
 } from './runtimeHelpers'
 import { isString, isObject, hyphenate, extend } from '@vue/shared'
 
@@ -215,7 +216,7 @@ export function injectProp(
   prop: Property,
   context: TransformContext
 ) {
-  let propsWithInjection: ObjectExpression | CallExpression
+  let propsWithInjection: ObjectExpression | CallExpression | undefined
   const props =
     node.type === NodeTypes.VNODE_CALL ? node.props : node.arguments[2]
   if (props == null || isString(props)) {
@@ -228,9 +229,17 @@ export function injectProp(
     if (!isString(first) && first.type === NodeTypes.JS_OBJECT_EXPRESSION) {
       first.properties.unshift(prop)
     } else {
-      props.arguments.unshift(createObjectExpression([prop]))
+      if (props.callee === TO_HANDLERS) {
+        // #2366
+        propsWithInjection = createCallExpression(context.helper(MERGE_PROPS), [
+          createObjectExpression([prop]),
+          props
+        ])
+      } else {
+        props.arguments.unshift(createObjectExpression([prop]))
+      }
     }
-    propsWithInjection = props
+    !propsWithInjection && (propsWithInjection = props)
   } else if (props.type === NodeTypes.JS_OBJECT_EXPRESSION) {
     let alreadyExists = false
     // check existing key to avoid overriding user provided keys