From 2381874156ab722e9a1e4fd47096caa3b6ebb82a Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 31 Oct 2024 14:46:40 +0800
Subject: [PATCH] fix(compiler-core): handle v-if userKey not resolved when use
 :key shorthand

---
 .../__tests__/transforms/vIf.spec.ts             |  9 +++++++++
 packages/compiler-core/src/transforms/vIf.ts     | 16 +++++++++++++---
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/compiler-core/__tests__/transforms/vIf.spec.ts b/packages/compiler-core/__tests__/transforms/vIf.spec.ts
index 2c2fedab0d5..784fb811a35 100644
--- a/packages/compiler-core/__tests__/transforms/vIf.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vIf.spec.ts
@@ -209,6 +209,15 @@ describe('compiler: v-if', () => {
         content: `_ctx.ok`,
       })
     })
+
+    test('v-if + :key shorthand', () => {
+      const { node } = parseWithIfTransform(`<div v-if="ok" :key></div>`)
+      expect(node.type).toBe(NodeTypes.IF)
+      expect(node.branches[0].userKey).toMatchObject({
+        arg: { content: 'key' },
+        exp: { content: 'key' },
+      })
+    })
   })
 
   describe('errors', () => {
diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts
index 54c505407a3..792219cb70e 100644
--- a/packages/compiler-core/src/transforms/vIf.ts
+++ b/packages/compiler-core/src/transforms/vIf.ts
@@ -34,6 +34,7 @@ import { cloneLoc } from '../parser'
 import { CREATE_COMMENT, FRAGMENT } from '../runtimeHelpers'
 import { findDir, findProp, getMemoedVNodeCall, injectProp } from '../utils'
 import { PatchFlags } from '@vue/shared'
+import { transformBindShorthand } from './vBind'
 
 export const transformIf: NodeTransform = createStructuralDirectiveTransform(
   /^(if|else|else-if)$/,
@@ -108,7 +109,7 @@ export function processIf(
   }
 
   if (dir.name === 'if') {
-    const branch = createIfBranch(node, dir)
+    const branch = createIfBranch(node, dir, context)
     const ifNode: IfNode = {
       type: NodeTypes.IF,
       loc: cloneLoc(node.loc),
@@ -153,7 +154,7 @@ export function processIf(
 
         // move the node to the if node's branches
         context.removeNode()
-        const branch = createIfBranch(node, dir)
+        const branch = createIfBranch(node, dir, context)
         if (
           __DEV__ &&
           comments.length &&
@@ -205,8 +206,17 @@ export function processIf(
   }
 }
 
-function createIfBranch(node: ElementNode, dir: DirectiveNode): IfBranchNode {
+function createIfBranch(
+  node: ElementNode,
+  dir: DirectiveNode,
+  context: TransformContext,
+): IfBranchNode {
   const isTemplateIf = node.tagType === ElementTypes.TEMPLATE
+  const keyProp = findProp(node, `key`, false, true)
+  // resolve :key shorthand #11321
+  if (keyProp && keyProp.type === NodeTypes.DIRECTIVE && !keyProp.exp) {
+    transformBindShorthand(keyProp, context)
+  }
   return {
     type: NodeTypes.IF_BRANCH,
     loc: node.loc,