Skip to content

fix(vModel): hyphenated v-model should use modifiers #4850

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

fix(vModel): hyphenated v-model should use modifiers #4850

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aeb8072
fix(runtime-core): v-model Modifiers trim/number did not work if use …
Oct 25, 2021
9813e0e
update testcases
Oct 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions packages/runtime-core/__tests__/componentEmits.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,6 +353,54 @@ describe('component: emit', () => {
expect(fn2).toHaveBeenCalledTimes(1)
expect(fn2).toHaveBeenCalledWith('two')
})
// for hyphenate props and camelize emit
test('.trim modifier should work with v-model on component for hyphenate props and camelize emit', () => {
const Foo = defineComponent({
render() {},
created() {
this.$emit('update:firstName', ' one ')
}
})

const fn1 = jest.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')
})

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

const fn1 = jest.fn()

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

})

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

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

test('isEmitListener', () => {
const options = {
Expand Down
3 changes: 2 additions & 1 deletion packages/runtime-core/src/componentEmits.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,8 @@ export function emit(
const isModelListener = event.startsWith('update:')

// for v-model update:xxx events, apply modifiers on args
const modelArg = isModelListener && event.slice(7)
const eventArg = isModelListener && event.slice(7)
const modelArg = eventArg && (hyphenate(eventArg) in props ? hyphenate(eventArg) : camelize(eventArg))
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doesn't this also do it:

Suggested change
const modelArg = eventArg && (hyphenate(eventArg) in props ? hyphenate(eventArg) : camelize(eventArg))
const modelArg = eventArg && (eventArg in props ? eventArg : hyphenate(eventArg))

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, i have add a testcase, and i add hyphenate because it may like this

this.$emit('update:firstName', ' one ')

// in parent
v-model:first-name.trim="firstName"

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know it's been nearly two years since this was opened, but I think this PR is still relevant with the latest main branch and I have a suggestion.

I believe there's a third option that needs to be handled here, not just camel and kebab case. I think an exact match also needs to be considered.

Here's an example:

While I accept it is not common practice, it is possible for the v-model argument to be written in neither camel case nor kebab case. In the example above I use v-model:abc-DEF.trim. This does work with the current code on main, but it no longer works with the change proposed in this PR.

Even though it's an edge case, I think it's important that an exact match should always work. Case coercion logic shouldn't change that.

There's similar logic further down the same file for determining the value of handlerName. That tries an exact match first, before considering any case changes. I think the logic for modifiers should be consistent with that.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've opened #9609, which builds on the work done here and also covers the case I mentioned above.

if (modelArg && modelArg in props) {
const modifiersKey = `${
modelArg === 'modelValue' ? 'model' : modelArg
Expand Down