fix(defineModel): handle kebab-case model correctly (#12063)

close #12060
vuejs · Oct 11, 2024 · c0418a3 · c0418a3
1 parent f1a4f67
commit c0418a3
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git 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
@@ -28,22 +28,22 @@ 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
     let prevSetValue: any = EMPTY_OBJ
     let prevEmittedValue: any
 
     watchSyncEffect(() => {
-      const propValue = props[name]
+      const propValue = props[camelizedName]
       if (hasChanged(localValue, propValue)) {
         localValue = propValue
         trigger()