Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v-slot cannot use uppercase or mixed case names #7513

Closed
brakop opened this issue Jul 29, 2020 · 3 comments
Closed

v-slot cannot use uppercase or mixed case names #7513

brakop opened this issue Jul 29, 2020 · 3 comments

Comments

@brakop
Copy link

brakop commented Jul 29, 2020

Found this while adding custom menu items to q-editor using templates with v-slots and the definition stanza, but in short, if you use anything aside from lowercase characters or numbers to identify your v-slot it will never be found. What's truly odd to me, is that the <template v-slot:> The name upper or lowercase does not matter. However, add ANY uppercase character to the toolbar definition and it will never find/render the template.

CodePen (Broken) Example
To "fix" the example, just change "Token" to "token" on line 14.

To Reproduce
Working Examples: (toolbar definition | template definition)
['token'] | <template v-slot:"token">
['token'] | <template v-slot:"TOKEN">
['token'] | <template v-slot:"tOkEn">
['token'] | <template v-slot:"ToKeN">

Failing Examples (which I expected would work as long as case matched, but they don't):
['TOKEN'] | <template v-slot:"TOKEN">
['ToKen'] | <template v-slot:"ToKen">
['tOkEn'] | <template v-slot:"tOkEn">

Steps to reproduce the behavior:

  1. Go to the CodePen
  2. Change ['Token'] to ['token'] on line 14, you'll see the Token drop down appear in the toolbar menu.
  3. Change it back to 'Token' (or any other uppercase combination) and watch Token disappear with no error/warning/explanation

Expected behavior
If the case matches, it should find the v-slot name. I was just trying to do some appropriate naming: RowCount and could not figure out why it wouldn't render but 'symbol' would until I stumbled across the case. Either that or AT LEAST tell me "could not find definition 'RowCount' so that I know that's why the template isn't loading.

Screenshots
Broken Code Pen:
image
Working Code Pen:
image

Platform (please complete the following information):
OS: Linux running from Docker container
This actually isn't a compiled Quasar, it's running on a ColdFusion server using these JS libraries for Vue and Quasar:
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.9.15/dist/quasar.umd.min.js"></script>

Browsers: Chrome

@pdanpdan
Copy link
Collaborator

Hello. Very good and detailed bug report, but

vuejs/vue#9449
https://gitmemory.com/issue/vuejs/vue/11528/660709335

@brakop
Copy link
Author

brakop commented Jul 29, 2020

Thanks for the quick answer! A trap for young players then! Cheers!

@pdanpdan
Copy link
Collaborator

It's better to use all lowercase for slot names. But I think if you only use render functions then mixed case will work on slot names. It's just a html / sfc thing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants