From c0418a3b8fa96a0b108ab71b7aab5d3388f90557 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B1=B1=E5=90=B9=E8=89=B2=E5=BE=A1=E5=AE=88?=
 <85992002+KazariEX@users.noreply.github.com>
Date: Fri, 11 Oct 2024 10:35:57 +0800
Subject: [PATCH] fix(defineModel): handle kebab-case model correctly (#12063)

close #12060
---
 .../runtime-core/__tests__/helpers/useModel.spec.ts  | 12 ++++++------
 packages/runtime-core/src/helpers/useModel.ts        |  8 ++++----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/runtime-core/__tests__/helpers/useModel.spec.ts b/packages/runtime-core/__tests__/helpers/useModel.spec.ts
index 3c724b0ba..8d31848e1 100644
--- a/packages/runtime-core/__tests__/helpers/useModel.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/useModel.spec.ts
@@ -153,10 +153,10 @@ describe('useModel', () => {
 
     const compRender = vi.fn()
     const Comp = defineComponent({
-      props: ['fooBar'],
-      emits: ['update:fooBar'],
+      props: ['foo-bar'],
+      emits: ['update:foo-bar'],
       setup(props) {
-        foo = useModel(props, 'fooBar')
+        foo = useModel(props, 'foo-bar')
         return () => {
           compRender()
           return foo.value
@@ -192,10 +192,10 @@ describe('useModel', () => {
 
     const compRender = vi.fn()
     const Comp = defineComponent({
-      props: ['fooBar'],
-      emits: ['update:fooBar'],
+      props: ['foo-bar'],
+      emits: ['update:foo-bar'],
       setup(props) {
-        foo = useModel(props, 'fooBar')
+        foo = useModel(props, 'foo-bar')
         return () => {
           compRender()
           return foo.value
diff --git a/packages/runtime-core/src/helpers/useModel.ts b/packages/runtime-core/src/helpers/useModel.ts
index 37fd1d719..c40938ead 100644
--- a/packages/runtime-core/src/helpers/useModel.ts
+++ b/packages/runtime-core/src/helpers/useModel.ts
@@ -28,14 +28,14 @@ export function useModel(
     return ref() as any
   }
 
-  if (__DEV__ && !(i.propsOptions[0] as NormalizedProps)[name]) {
+  const camelizedName = camelize(name)
+  if (__DEV__ && !(i.propsOptions[0] as NormalizedProps)[camelizedName]) {
     warn(`useModel() called with prop "${name}" which is not declared.`)
     return ref() as any
   }
 
-  const camelizedName = camelize(name)
   const hyphenatedName = hyphenate(name)
-  const modifiers = getModelModifiers(props, name)
+  const modifiers = getModelModifiers(props, camelizedName)
 
   const res = customRef((track, trigger) => {
     let localValue: any
@@ -43,7 +43,7 @@ export function useModel(
     let prevEmittedValue: any
 
     watchSyncEffect(() => {
-      const propValue = props[name]
+      const propValue = props[camelizedName]
       if (hasChanged(localValue, propValue)) {
         localValue = propValue
         trigger()