Vue-next: Inconsistency with v-model @update event names

[NataliaTepluhina]

Version

3.0.0-alpha.3

Reproduction link

https://codesandbox.io/s/v-model-decomposed-camel-case-v337l

Steps to reproduce

1. Create a custom component and add v-model to it.
2. From the custom component, emit update:modelValue event. Everything should work as expected: https://codesandbox.io/s/v-model-on-component-pex6s
3. Change v-model to

:model-value="myText"
 @update:modelValue="myText = $event"

The value won't update properly: https://codesandbox.io/s/v-model-decomposed-camel-case-v337l

1. Now change event name to kebab-case on both parent and child components. It starts to work again: https://codesandbox.io/s/v-model-decomposed-kebab-case-jh7h7

What is expected?

As per RFC, everything should work fine with camelCased event name

What is actually happening?

When we decompose v-model to passed model-value prop and emitted update:modelValue event, it works only with kebab-cased event name.

---

Please check the discussion on https://github.com/vuejs/docs-next/pull/39#discussion_r370072027

[yyx990803]

This is actually because the use of in-DOM templates. The innerHTML is normalized by the browser and converts all attributes names to lowercase before Vue's compiler can handle it.

i.e. onUpdate:modelValue is converted to onUpdate:modelvalue, so the event names won't match.

When using in-dom templates, event names should also follow the kebab case convention:

<child-input
        :model-value="myText"
        @update:model-value="myText = $event"
      ></child-input>

In 2.x, a two-way binding via :model-value.sync automatically attaches listeners for both update:model-value and update:modelValue.

For consistency, in 3.0 we should allow update:modelValue event to trigger the handler of v-model:model-value.

[yyx990803]

After the fix:

• For a prop named fooBar, the emitted events should always be consistent and use update:fooBar.

• When using the component:

  • If using non-DOM templates: prefer <child v-model:fooBar="xxx" />
  • If using in-DOM templates, <child v-model:foo-bar="xxx" /> will also work.