From: 山吹色御守 <85992002+KazariEX@users.noreply.github.com>
Date: Fri, 11 Oct 2024 02:35:57 +0000 (+0800)
Subject: fix(defineModel): handle kebab-case model correctly (#12063)
X-Git-Tag: v3.5.12~17
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=c0418a3b8fa96a0b108ab71b7aab5d3388f90557;p=thirdparty%2Fvuejs%2Fcore.git

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

close #12060
---

diff --git a/packages/runtime-core/__tests__/helpers/useModel.spec.ts b/packages/runtime-core/__tests__/helpers/useModel.spec.ts
index 3c724b0ba0..8d31848e1b 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 37fd1d719b..c40938ead3 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()