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

close vuejs#12060
ishowman · 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()