You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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:
Go to the CodePen
Change ['Token'] to ['token'] on line 14, you'll see the Token drop down appear in the toolbar menu.
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:
Working Code Pen:
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
The text was updated successfully, but these errors were encountered:
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.
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:
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:
Working Code Pen:
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
The text was updated successfully, but these errors were encountered: