Skip to content

Commit

Permalink
fix(v-model): component v-model modifiers trim and number when cases …
Browse files Browse the repository at this point in the history
…don't match (#9609)

close #4848
close #4850 (based on commits from #4850)

Co-authored-by: zhaozhongyu <zhaozhongyu@xunlei.com>
Co-authored-by: Evan You <evan@vuejs.org>
  • Loading branch information
3 people authored Jul 13, 2024
1 parent 05779a7 commit 7fb6eb8
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 2 deletions.
77 changes: 77 additions & 0 deletions packages/runtime-core/__tests__/componentEmits.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -356,6 +356,83 @@ describe('component: emit', () => {
expect(fn2).toHaveBeenCalledWith('two')
})

test('.trim modifier should work with v-model on component for kebab-cased props and camelCased emit', () => {
const Foo = defineComponent({
render() {},
created() {
this.$emit('update:firstName', ' one ')
},
})

const fn1 = vi.fn()

const Comp = () =>
h(Foo, {
'first-name': null,
'first-nameModifiers': { trim: true },
'onUpdate:first-name': fn1,
})

render(h(Comp), nodeOps.createElement('div'))

expect(fn1).toHaveBeenCalledTimes(1)
expect(fn1).toHaveBeenCalledWith('one')
})

test('.trim modifier should work with v-model on component for camelCased props and kebab-cased emit', () => {
const Foo = defineComponent({
render() {},
created() {
this.$emit('update:model-value', ' one ')
this.$emit('update:first-name', ' two ')
},
})

const fn1 = vi.fn()
const fn2 = vi.fn()

const Comp = () =>
h(Foo, {
modelValue: null,
modelModifiers: { trim: true },
'onUpdate:modelValue': fn1,

firstName: null,
firstNameModifiers: { trim: true },
'onUpdate:firstName': fn2,
})

render(h(Comp), nodeOps.createElement('div'))

expect(fn1).toHaveBeenCalledTimes(1)
expect(fn1).toHaveBeenCalledWith('one')
expect(fn2).toHaveBeenCalledTimes(1)
expect(fn2).toHaveBeenCalledWith('two')
})

test('.trim modifier should work with v-model on component for mixed cased props and emit', () => {
const Foo = defineComponent({
render() {},
created() {
this.$emit('update:base-URL', ' one ')
},
})

const fn1 = vi.fn()

const Comp = () =>
h(Foo, {
'base-URL': null,
'base-URLModifiers': { trim: true },
'onUpdate:base-URL': fn1,
})

render(h(Comp), nodeOps.createElement('div'))

expect(fn1).toHaveBeenCalledTimes(1)
expect(fn1).toHaveBeenCalledWith('one')
})

test('.trim and .number modifiers should work with v-model on component', () => {
const Foo = defineComponent({
render() {},
Expand Down
9 changes: 7 additions & 2 deletions packages/runtime-core/src/helpers/useModel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -108,5 +108,10 @@ export function useModel(
export const getModelModifiers = (
props: Record<string, any>,
modelName: string,
): Record<string, boolean> | undefined =>
props[`${modelName === 'modelValue' ? 'model' : modelName}Modifiers`]
): Record<string, boolean> | undefined => {
return modelName === 'modelValue' || modelName === 'model-value'
? props.modelModifiers
: props[`${modelName}Modifiers`] ||
props[`${camelize(modelName)}Modifiers`] ||
props[`${hyphenate(modelName)}Modifiers`]
}

0 comments on commit 7fb6eb8

Please sign in to comment.