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.

Okay, I’ll try going back to 12.x and I’ll let you guys know. Thanks for the time being.

@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 use vue-cli and Quasar as a plugin).

I can make the project available for testing if it helps.

Actually I already did this, several times. I even cleared up all my global npm modules and reinstalled everything, to no effect. Thanks anyway!

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!

In the QExpansionItem docs, Content section, the first two items are icon and expand-icon. Their descriptions are identical. In addition, the similarly named expanded-icon adds to the confusion. Maybe some more clarification in the docs would be helpful. Thanks!

Thank you guys for the great answers. Much appreciated!

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() and moveLeft() 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.

Thanks to your tip, here’s the resulting code, complete with Intellisense:

/** @type {quasar.QTooltip} */
const tooltipProps = QTooltip.options.props;
tooltipProps.delay.default = 550;

Great answer, thanks for the quick solution.

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 no this.$q.tooltip object. How to do it?

P.S. I think a similar issue was raised here but it was closed soon afterwards.

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!

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.

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.

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.

@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.

@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!

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,

@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!