diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
index 42974581f60..8cc085572af 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
@@ -83,9 +83,9 @@ return function render(_ctx, _cache) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"input\\", {
- value: model,
- \\"onUpdate:value\\": $event => ((model) = $event)
- }, null, 40 /* PROPS, HYDRATE_EVENTS */, [\\"value\\", \\"onUpdate:value\\"]))
+ \\"foo-value\\": model,
+ \\"onUpdate:fooValue\\": $event => ((model) = $event)
+ }, null, 40 /* PROPS, HYDRATE_EVENTS */, [\\"foo-value\\", \\"onUpdate:fooValue\\"]))
}
}"
`;
diff --git a/packages/compiler-core/__tests__/transforms/vModel.spec.ts b/packages/compiler-core/__tests__/transforms/vModel.spec.ts
index b4b8c33cda6..808fb94215e 100644
--- a/packages/compiler-core/__tests__/transforms/vModel.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vModel.spec.ts
@@ -253,13 +253,13 @@ describe('compiler: transform v-model', () => {
})
test('with argument', () => {
- const root = parseWithVModel('')
+ const root = parseWithVModel('')
const node = root.children[0] as ElementNode
const props = ((node.codegenNode as VNodeCall).props as ObjectExpression)
.properties
expect(props[0]).toMatchObject({
key: {
- content: 'value',
+ content: 'foo-value',
isStatic: true
},
value: {
@@ -270,7 +270,7 @@ describe('compiler: transform v-model', () => {
expect(props[1]).toMatchObject({
key: {
- content: 'onUpdate:value',
+ content: 'onUpdate:fooValue',
isStatic: true
},
value: {
diff --git a/packages/compiler-core/src/transforms/vModel.ts b/packages/compiler-core/src/transforms/vModel.ts
index bf5e69beb2c..3f13f327098 100644
--- a/packages/compiler-core/src/transforms/vModel.ts
+++ b/packages/compiler-core/src/transforms/vModel.ts
@@ -18,6 +18,7 @@ import {
} from '../utils'
import { IS_REF } from '../runtimeHelpers'
import { BindingTypes } from '../options'
+import { camelize } from '@vue/shared'
export const transformModel: DirectiveTransform = (dir, node, context) => {
const { exp, arg } = dir
@@ -77,7 +78,7 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
const propName = arg ? arg : createSimpleExpression('modelValue', true)
const eventName = arg
? isStaticExp(arg)
- ? `onUpdate:${arg.content}`
+ ? `onUpdate:${camelize(arg.content)}`
: createCompoundExpression(['"onUpdate:" + ', arg])
: `onUpdate:modelValue`