I thought the problem was gone, but no. Going back to 12.x allowed the app to be built, but unfortunately it seems the problem is still there.

Posts made by rubs
-
RE: this.$q is undefined
-
RE: this.$q is undefined
Okay, I’ll try going back to 12.x and I’ll let you guys know. Thanks for the time being.
-
RE: this.$q is undefined
@dobbel,
quasar info
shows this:What if you try it in a VM or other computer?
The project works in my colleague’s machine, so something must be different here. However I have many other Vue / Quasar projects and this is the only one with this kind of problem. (It’s the only one that uses
quasar-cli
. My other ones usevue-cli
and Quasar as a plugin).I can make the project available for testing if it helps.
-
RE: this.$q is undefined
Actually I already did this, several times. I even cleared up all my global npm modules and reinstalled everything, to no effect. Thanks anyway!
-
this.$q is undefined
Hi,
I’m trying to deploy a minimal app (it’s essentially the quasar-cli example) but I keep getting the error [Vue warn]: Error in data(): “TypeError: Cannot read property ‘screen’ of undefined”. The template at MayLayout.vue starts with
<q-layout>
. The trace shows the error is at QLayout.js, line 43:height: this.$q.screen.height,
As a test, I’ve replaced
<q-layout>
with<q-btn icon="help" />
. This gives [Vue warn]: Error in render: “TypeError: Cannot read property ‘platform’ of undefined” at QBtn.js, line 71:if (this.$q.platform.has.touch === true) {
So the obvious conclusion is that
this.$q
is undefined in those files, which I confirmed using the Chrome debugger. In the vue file, however,<div>{{ $q }}</div>
shows$q
normally.Do any of you know of any condition that would make
$q
unavailable to the Quasar modules?Any help is much appreciated. Thanks in advance!
-
Confusing QExpansionItem docs
In the QExpansionItem docs, Content section, the first two items are
icon
andexpand-icon
. Their descriptions are identical. In addition, the similarly namedexpanded-icon
adds to the confusion. Maybe some more clarification in the docs would be helpful. Thanks! -
RE: Determine the element under the mouse with popup-proxy
Thank you guys for the great answers. Much appreciated!
-
Determine the element under the mouse with popup-proxy
Hi,
This question probably has a simple solution, but I can’t find it in the docs / Google / this forum. I’m creating a context menu and I need to determine the element under the mouse when the menu was called. Specifically, I want a right-click in a tab and move it left or right. Something like this:
<q-tabs v-model="selectedTab" > <q-tab v-for="tab in tabs" :key="tab.name" :name="tab.name" :label="tab.label" > <q-popup-proxy context-menu> <q-list> <q-item clickable @click="moveRight(selectedTab)" > <q-item-section>Move right</q-item-section> </q-item> <q-item clickable @click="moveLeft(selectedTab)" > <q-item-section>Move left</q-item-section> </q-item> </q-list> </q-popup-proxy> </q-tab> </q-tabs>
In the code above, the argument passed to
moveRight()
andmoveLeft()
won’t do what I need. I want it to move the tab where the context menu was called, not the currently selected tab.Thanks in advance.
-
RE: Set default tooltip properties using UMD
Thanks to your tip, here’s the resulting code, complete with Intellisense:
/** @type {quasar.QTooltip} */ const tooltipProps = QTooltip.options.props; tooltipProps.delay.default = 550;
-
RE: Set default tooltip properties using UMD
Great answer, thanks for the quick solution.
-
Set default tooltip properties using UMD
I’m looking for a way to set default tooltip properties using UMD. When using the CLI version I do it as follows:
import { QTooltip } from 'quasar'; QTooltip.options.props.delay.default = 550;
Now I have a UMD project and I want to do the same. However there is no equivalent of
this.$q.notify.setDefaults(...)
(which I use to set Notify defaults) because there is nothis.$q.tooltip
object. How to do it?P.S. I think a similar issue was raised here but it was closed soon afterwards.
-
RE: Select placeholder with no use-input?
Good! I really meant in the API section / selected slot, but improvements to the docs are always welcome. Now I see that I also completely missed the selected-item slot… This is a truly flexible component, I’m always learning something new about it. Thanks again!
-
RE: Select placeholder with no use-input?
Great, thanks for the solution! Select is one of the most complex Quasar components, so it’s an easy miss. It deserves at least an example in the docs IMO. Thanks again.
-
Select placeholder with no use-input?
Did anyone have success creating a placeholder for a Select component with no
use-input
property?I want it do simply display e.g. “Choose an option” when nothing is selected in a read-only (i.e. non-editable) Select, and for several reasons I also cannot use the component label for this.
Thanks in advance for any tips.
-
RE: How to properly insert a select inside a toolbar?
Whoa, that was fast. Just nailed it down to a CSS problem. The q-select component was inheriting a style it was not supposed to. Again, thank you guys for your help.
-
RE: How to properly insert a select inside a toolbar?
@beets said in How to properly insert a select inside a toolbar?:
@rubs I noticed a typo in your codepen:
<q-select v-model="model" :options="options" options-dense borderless></select>
You’re closing it with
</select>
and not</q-select>
. When I change it, it seems to work okay for me.You’re right, thanks! No wonder it didn’t work… So now the pen works as expected, it does not reproduce the issue I’m having. I’ll try harder, I’ll let you guys know. Thanks again.
-
RE: How to properly insert a select inside a toolbar?
@s-molinari said in How to properly insert a select inside a toolbar?:
If it is just a simple selection, how about using a QBtnDropdown?
Scott
I may try that. However I believe the QSelect should at least work as expected, it doesn’t (see the pen).
@dobbel said in How to properly insert a select inside a toolbar?:
really have no idea what the problem is…
Sorry for the confusion. I’ve added some screenshots from the actual app.
the QSelect title disappears
Here, no title when the QSelect is inserted. It is there, but its width is zero.
its arrow gets pushed to the right
This happens when I surround the QSelect with a QToolbarTitle. Its width occupies the whole remaining space.
What I want is:
Hope it’s clearer now!
-
How to properly insert a select inside a toolbar?
I’m trying to insert a QSelect inside a QToolbar, but I’m facing some problems. The idea is to allow the user to select one of multiple organizations by replacing the app title (previously a QToolbarTitle) with a select control.
I kinda found a way to do it, but either the QSelect title disappears or its arrow gets pushed to the right of the remaining space. What I want is the arrow to move according to the organization title, like this:
After spending quite some time trying to figure it out, here I’ve created a simple pen to illustrate my problem. In fact the pen is even worse than the actual app because nothing after the QSelect appears in the toolbar. (The app belongs to a client so I can’t share its code, sorry for that.)
Any ideas? Many thanks in advance,
-
RE: Pattern property for q-input
@metalsadman, how could I extend this example to work as a mask, i.e. prevent invalid characters to show at all? The code
<q-input v-model="model" @input="v => { model = v.replace(/[^0-9a-zA-Z-]/g,'') }" /
does work, but only when the input loses focus.Thanks!