[Bug Report] Case insensitive dynamic slot

[dionysiosarvanitis]

Environment

Vuetify Version: 2.1.15
Vue Version: 2.6.11
Browsers: Chrome 80.0.3987.7
OS: Windows 10

Steps to reproduce

Try to customize default row in a data-table where the header value contains an uppercase letter.

Expected Behavior

According to data-tables#customizing-default-rows the value should be customizable.

Actual Behavior

Value cannot be referred.

Reproduction Link

https://codepen.io/arvanoid/pen/NWPdgNQ?&editable=true&editors=101

Other comments

My use case is while trying to sort the header, I wanted to keep the value exactly as it is expected at the server side. For example, a url containing &sort=product.deliveryDate

[KaelWD]

https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case

Use string templates (see http://template.vuetifyjs.com/) or .vue files.

[dionysiosarvanitis]

Doesn't work with kebap-case equivelent @KaelWD

[jacekkarczmarczyk]

Yes, it works https://codepen.io/jkarczm/pen/LYExzzb

If you have any additional questions, please reach out to us in our Discord community.

[MajesticPotatoe]

It does: https://codepen.io/majesticpotatoe-the-bashful/pen/dyPNVZv
You cant use capitals in slot names (aka camelCase), as they are normalized to all-lowercase by the browser.

[dionysiosarvanitis]

@MajesticPotatoe @jacekkarczmarczyk You've also changed the header value to be with dashes. I want the header value to be camelCase'd so I can use it as a sort field like that &sort=product.deliveryDate.

Like that https://codepen.io/arvanoid/pen/YzPNEvd

[MajesticPotatoe]

@dionysiosarvanitis that was because you said kebab case doesn't work but it does...

You cant use capitals in slot names (aka camelCase), as they are normalized to all-lowercase by the browser

If you have any additional questions, please reach out to us in our Discord community.

[KaelWD]

To be clear:

You can't use capitals in slot names (aka camelCase) in DOM templates. Mixed case is fine in string templates (actual strings or <script type="text/x-template">) or .vue files.