Version

3.2.19

Reproduction link

v3.vuejs.org

Steps to reproduce

This is actually a question, not a bug, so no steps to reproduce

What is expected?

According to the styleguide, Vue should emit update:model-value instead of update:modelValue

What is actually happening?

Vue emits an event on model changes which is camelCased string - update:modelValue under the hood. So I want to understand whether it is expected behavior or not. If yes, why does Styleguide recommend using kebab-cased event names?

Links:

1. Styleguide, where we see the recommendation to use kebab-case for emitted events: https://v3.vuejs.org/guide/component-custom-events.html#event-names

2. Migration strategy, where we see that Vue emits update:modelValue by default which is in camelCase. https://v3.vuejs.org/guide/migration/v-model.html#migration-strategy

Related issue created in the vuejs/docs: https://github.com/vuejs/docs/issues/1250

Don't duplicate issues, thanks.

It's because of the limitation of HTML:

<custom-component @my-event="doSomething" />

using @myEvent in HTML will render as @myevent but with v-model the event listener is added by vue so we don't have that limitation

Got it. What if we use the Vue event name directly in our code?

<custom-component :model-value="value" @update:modelValue="onUpdate" />

Will it break the Styleguide recommendations? Also, wouldn't it be better to use the one style in both projects' code base and Vue core?

Regarding the issue duplication: there are no answers since 11 days after publication, so I decided to ask here. But I will take it into consideration

@posva any details?