Skip to content
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.

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

fix(defineModel): support kebab-case/camelCase mismatches #9950

Merged
merged 1 commit into from
Jan 3, 2024

Conversation

skirtles-code
Copy link
Contributor

@skirtles-code skirtles-code commented Dec 30, 2023

This PR attempts to fix a problem with the logic for detecting local mode. The problem occurs when the parent uses kebab-case and the child uses camelCase.

Here's an example illustrating the problem I'm trying to fix with 3.4.3:

The value is supposed to be restricted to the range 0-10, but clicking the buttons allows the child to drift out of that range.

This is because the parent uses v-model:foo-bar, with a hyphenated prop name, whereas the child is using defineModel('fooBar'). It incorrectly uses local mode in that scenario.

The example above works correctly if it is changed to v-model:fooBar instead, but that isn't an option if the parent uses an in-DOM template. Attempting to work around the problem in the child using defineModel('foo-bar') results in an error. This PR does not address that error, it just tries to allow the parent template to use kebab-case.

The key change is to check for hyphenatedName in rawProps. I've also added a check for `onUpdate:${hyphenatedName}` in rawProps, though that is less important as the template compiler doesn't generate kebab-case listener names. I still thought it was worth including, both for consistency and because listeners can be passed in other ways without going through the compiler.

Here's the same example above, but using this PR:

Copy link

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 89.5 kB (+36 B) 34 kB (+11 B) 30.7 kB (+10 B)
vue.global.prod.js 147 kB (+36 B) 53.3 kB (+12 B) 47.6 kB (+14 B)

Usages

Name Size Gzip Brotli
createApp 49.8 kB 19.5 kB 17.8 kB
createSSRApp 53.2 kB 20.8 kB 19 kB
defineCustomElement 52.1 kB 20.3 kB 18.5 kB
overall 63.3 kB 24.4 kB 22.2 kB

@yyx990803 yyx990803 merged commit 10ccb9b into vuejs:main Jan 3, 2024
11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants