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

[zhaozhongyu]

…hyphenate string in props and camelize in emits

fix: #4848

[posva]

Can you add a test too?

[posva]

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))

[zhaozhongyu]

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"

[skirtles-code]

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:

• SFC Playground

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.

[skirtles-code]

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