Vue: Vue not parsing prop names with numbers?

[JosephusPaye]

Version

2.5.13

Reproduction link

https://jsfiddle.net/JosephusPaye/yqnjyq1k/2/

Steps to reproduce

1. Run the linked fiddle: https://jsfiddle.net/JosephusPaye/yqnjyq1k/2/
2. Check the result to see that the prop with a number isn't parsed
3. Verify this by inspecting with devtools, the prop is attached to the element as an attribute.

What is expected?

The prop, use24hrFormat (use-24hr-format) should be parsed and the value in the component should be true.

What is actually happening?

The prop is not parsed and the value in the component is the default value, false.

---

Hi,

I'm working on a time picker (using a SFC) and want to have a Boolean prop to determine whether to use 24-hour format for the time or not. However, using the prop use24hrFormat and the template equivalent use-24hr-format doesn't seem to be working. When I switch to other props, for example useMilitaryTime, it works fine.

I'm thinking this has something to do with the number in the prop name. Maybe using numbers in prop names like this is not supported, but I wasn't able to find anything about this in the docs.

Thanks for your time.

[mikaellindemann]

If you remove the dash before 24 it seems to work.

[Justineo]

The way Vue is converting camelCase props to kebab-case is pretty simple:

https://github.com/vuejs/vue/blob/f319bef532dd0d3cae4302e7a6a038d45e7363ba/src/shared/util.js#L168-L174

It only inserts a hyphen before upper case letters and convert them to lower case. And I think we cannot do much about numbers because adding hyphens around consecutive numbers will be a breaking change.

[fegg]

@JosephusPaye Hi~🖖 you can do this =.=

<my-component :use24hr-format="true" :use-military-time="true"></my-component>

[yyx990803]

This is a behavior that is hard to say whether it's right or wrong. And since changing it would be breaking to existing code, we have to leave it as is.