root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 5 Packages Projects Releases Wiki Activity

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

close #12060
This commit is contained in:
山吹色御守 2024-10-11 10:35:57 +08:00 committed by GitHub
parent f1a4f67aed
commit c0418a3b8f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/runtime-core/__tests__/helpers/useModel.spec.ts
View File

@ -153,10 +153,10 @@ describe('useModel', () => {
const compRender = vi.fn() const compRender = vi.fn()
const Comp = defineComponent({ const Comp = defineComponent({
props: ['fooBar'], props: ['foo-bar'],
emits: ['update:fooBar'], emits: ['update:foo-bar'],
setup(props) { setup(props) {
foo = useModel(props, 'fooBar') foo = useModel(props, 'foo-bar')
return () => { return () => {
compRender() compRender()
return foo.value return foo.value
@ -192,10 +192,10 @@ describe('useModel', () => {
const compRender = vi.fn() const compRender = vi.fn()
const Comp = defineComponent({ const Comp = defineComponent({
props: ['fooBar'], props: ['foo-bar'],
emits: ['update:fooBar'], emits: ['update:foo-bar'],
setup(props) { setup(props) {
foo = useModel(props, 'fooBar') foo = useModel(props, 'foo-bar')
return () => { return () => {
compRender() compRender()
return foo.value return foo.value

8
packages/runtime-core/src/helpers/useModel.ts
View File

@ -28,14 +28,14 @@ export function useModel(
return ref() as any 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.`) warn(`useModel() called with prop "${name}" which is not declared.`)
return ref() as any return ref() as any
} }
const camelizedName = camelize(name)
const hyphenatedName = hyphenate(name) const hyphenatedName = hyphenate(name)
const modifiers = getModelModifiers(props, name) const modifiers = getModelModifiers(props, camelizedName)
const res = customRef((track, trigger) => { const res = customRef((track, trigger) => {
let localValue: any let localValue: any
@ -43,7 +43,7 @@ export function useModel(
let prevEmittedValue: any let prevEmittedValue: any
watchSyncEffect(() => { watchSyncEffect(() => {
const propValue = props[name] const propValue = props[camelizedName]
if (hasChanged(localValue, propValue)) { if (hasChanged(localValue, propValue)) {
localValue = propValue localValue = propValue
trigger() trigger()