Event names using camelCase

[privatenumber]

The Custom Events page sets a confusing and contradicting recommendation on event-name conventions.

At the top it recommends using kebab-case because HTML is case-insensitive:

Since event names will never be used as variable or property names in JavaScript, there is no reason to use camelCase or PascalCase. Additionally, v-on event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML's case-insensitivity), so @myevent would become @myevent -- making myEvent impossible to listen to.

For these reasons, we recommend you always use kebab-case for event names.

However, a lot of code examples starting from the "Multiple v-model bindings" section contains camelCase event names:

$emit('update:firstName', $event.target.value) -> v-model:firstName="firstName"

This statement seems inaccurate too, considering part of the event name (eg. update:dataProperty) maps to a view-model property:

Since event names will never be used as variable or property names in JavaScript, there is no reason to use camelCase or PascalCase.

Edit:

• Confirmed not working Codepen
• Changing to kebab-case v-model.prop-name="..." where the emitted event can be either camelCase (update:propName) or kebab-case (update:prop-name) works. Codepen

[NataliaTepluhina]

@privatenumber thank you for spotting this! Fixed via c09d1a5 and added a working codepen to prevent confusion 😅

[privatenumber]

Awesome! Thanks for addressing it so fast.

Minor nitpick -- I would clarify that the second-half of the event name update:lastName is converted to kebab-case to map to the v-model binding v-model:last-name.

[privatenumber]

@NataliaTepluhina Is it alright if I make a follow up PR to address those points?

I don't want to put time into it if it's not welcome but I would love to contribute to help improve the docs.

[bencodezen]

@privatenumber That sounds great. Looking forward to the PR!

[NataliaTepluhina]

Closing this one as we might rethink the whole camelCase vs kebab-case recommendation (see #656)