fix(v-on): capitalize dynamic event names

packages/compiler-core/src/runtimeHelpers.ts

@@ -22,6 +22,7 @@ export const TO_DISPLAY_STRING = Symbol(__DEV__ ? `toDisplayString` : ``)
 export const MERGE_PROPS = Symbol(__DEV__ ? `mergeProps` : ``)
 export const TO_HANDLERS = Symbol(__DEV__ ? `toHandlers` : ``)
 export const CAMELIZE = Symbol(__DEV__ ? `camelize` : ``)
+export const CAPITALIZE = Symbol(__DEV__ ? `capitalize` : ``)
 export const SET_BLOCK_TRACKING = Symbol(__DEV__ ? `setBlockTracking` : ``)
 export const PUSH_SCOPE_ID = Symbol(__DEV__ ? `pushScopeId` : ``)
 export const POP_SCOPE_ID = Symbol(__DEV__ ? `popScopeId` : ``)
@@ -54,6 +55,7 @@ export const helperNameMap: any = {
   [MERGE_PROPS]: `mergeProps`,
   [TO_HANDLERS]: `toHandlers`,
   [CAMELIZE]: `camelize`,
+  [CAPITALIZE]: `capitalize`,
   [SET_BLOCK_TRACKING]: `setBlockTracking`,
   [PUSH_SCOPE_ID]: `pushScopeId`,
   [POP_SCOPE_ID]: `popScopeId`,

packages/compiler-core/src/transforms/vOn.ts

@@ -14,6 +14,7 @@ import { createCompilerError, ErrorCodes } from '../errors'
 import { processExpression } from './transformExpression'
 import { validateBrowserExpression } from '../validateExpression'
 import { isMemberExpression, hasScopeRef } from '../utils'
+import { CAPITALIZE } from '../runtimeHelpers'
 
 const fnExpRE = /^([\w$_]+|\([^)]*?\))\s*=>|^function(?:\s+[\w$]+)?\s*\(/
 
@@ -47,12 +48,16 @@ export const transformOn: DirectiveTransform = (
         : capitalize(rawName)
       eventName = createSimpleExpression(`on${normalizedName}`, true, arg.loc)
     } else {
-      eventName = createCompoundExpression([`"on" + (`, arg, `)`])
+      eventName = createCompoundExpression([
+        `"on" + ${context.helperString(CAPITALIZE)}(`,
+        arg,
+        `)`
+      ])
     }
   } else {
     // already a compound expression.
     eventName = arg
-    eventName.children.unshift(`"on" + (`)
+    eventName.children.unshift(`"on" + ${context.helperString(CAPITALIZE)}(`)
     eventName.children.push(`)`)
   }