Just in case anyone else is interested, here is how it works:

Add the following under mounted in your Vue file:

document.addEventListener('keydown', this.keyListener)

and here is how the handler works:

 keyListener: function (e) {
      if (e.key === '1' && (e.ctrlKey || e.metaKey)) {
        this.$root.$emit('userAlert', 'fatal', 'A message from the president', 'Obey the president!')
      } else if (e.key === '2' && (e.ctrlKey || e.metaKey)) {
        this.$root.$emit('userNotify', 'Ivey sent you a new message', '5 min ago.', 'notifications_active')
      } else if (e.key === '3' && (e.ctrlKey || e.metaKey)) {
        this.$root.$emit('showProgress', 0.35)
      } else if (e.key === '4' && (e.ctrlKey || e.metaKey)) {
        this.$root.$emit('showProgress', 0.70)
      } else if (e.key === '5' && (e.ctrlKey || e.metaKey)) {
        this.$root.$emit('showProgress', 1.00)
      }
    }

Works like a charm

Cheers,
Michael

@jraez Yep, that’s what I opted for…it works now as it should

Thanks a lot for your help @jraez and @metalsadman !

Cheers,
M.

Solved it (at least for my case):

This does not work:
<q-icon name="img:statics/icons/icon.png" />

This works for dev and build:
<img alt="App Logo" src="~assets/icon.png">

Cheers,
M.

PS: I tried the ~assets/icon.png path with q-icon and it did not work for me.

Hi there

I just wondered how to go about logging in Quasar and/or Vue. I have found very little documentation so far.

Is there a tested/proven approach to setting up logging to be used in development as well as production?

Cheers,
M.

Right, it seems that I’ve got it working how. Another bug I had was interfering as well…phew…

Thanks for your help @metalsadman @Hawkeye64

Hi there

I would like to have a a setup where I use a splitter and have the q-tabs on the left (v-slot:before) and the content on the right (v-slot:after). Clicking on the tab should load a page and display it in the appropriate place to the right (<router-view/>).

Issue: The whole page is replaced, not just the right side of the splitter. How do I make sure routing to a page does not overwrite the whole page?

Here’s the code:

<template>
  <q-page class="flex flex-start bg-secondary">
    <div style="width:100%">
      <q-splitter
        :value="160"
        disable
        unit="px"
      >
        <template v-slot:before>
          <q-tabs
            v-model="selectedTab"
            vertical
            dense
            inline-label
            >
            <div class="q-pa-sm" >
              <q-item-label lines="1" class="q-mt-xs text-body2 text-weight-bold text-uppercase" :style="{ color: localTextColor1 }" >DEV TOOLS</q-item-label>
            </div>
            <q-route-tab
              name="iveDebug"
              icon="account_box"
              label="IVE Debugging"
              style="justify-content:initial"
              :style="{ color: localTextColor2 }"
              to="/ivedebug"
              exact
            />
          </q-tabs>
        </template>
        <template v-slot:after>
          <q-page-container>
            <router-view/>
          </q-page-container>
        </template>
      </q-splitter>
    </div>
  </q-page>
</template>

Here’s the routing I’m doing:

  {
    path: '/ivedebug',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/IveDebug.vue') }
    ]
  }

Cheers,
m.

If you don’t need it too fancy…I’m doing a bit of regex in my utility lib to achieve this:

export function validateEmail (email) {
  var reg = /^([A-Za-z0-9_\-.+])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,})$/
  if (!reg.test(email)) return false
  return true
}

@kiani Not yet. Thanks, that’s exactly what I needed

Follow up: would wrapping the q-item-label in a <div> be the correct way of spacing the labels? I’m not really able to get this working right now -.-

Hey there

I’m doing a list and want to have a specific q-item-section expand to fill the available space. Consider the following code:

                              <q-list bordered>
                                <q-item clickable v-ripple>
                                  <q-item-section avatar>
                                    <q-avatar>
                                      <img :src="`https://cdn.quasar.dev/img/avatar6.jpg`">
                                    </q-avatar>
                                  </q-item-section>
                                  <q-item-section>
                                    <q-item-label>Topic Name</q-item-label>
                                  </q-item-section>
                                  <q-item-section>
                                    <q-item-label>Twitch</q-item-label>
                                    <q-item-label>Mixer</q-item-label>
                                    <q-item-label>YouTube</q-item-label>
                                  </q-item-section>
                                  <q-item-section>
                                    <q-item-label>Description goes here...</q-item-label>
                                  </q-item-section>
                                  <q-item-section>
                                    <q-item-label>External Link 1</q-item-label>
                                  </q-item-section>
                                  <q-item-section>
                                    <q-item-label>External Link 2</q-item-label>
                                  </q-item-section>
                                </q-item>
                              </q-list>

I would like to have the q-item-label that holds the description use as much space horizontally as available (i.e. expand). What is the correct way to achieve this?

Cheers,
Michael

@tof06 Yep, that solved it! I added the submit.prevent directive and removed the @click. Thanks!

Hi all

I am using the following form:

                    <form>
                      <div class="row">
                          <div class="column ">
                            <q-input
                              ref='noOfTopGamesField'
                              label='# of Top Games'
                              type="number"
                              outlined
                              dense
                              dark
                              color="accent"
                              bg-color="secondary"
                              v-model="noOfTopGames"
                              style="width:100px"
                              error-message="Please enter a value between 1 and 100."
                              :error="!isNoOfTopGamesValid"
                            />
                          </div>
                          <div class="column q-ma-xs">
                            <div class="row q-ml-md">
                              <q-btn
                                @click="runQueryTopGames"
                                type="submit"
                                unelevated
                                color='positive'
                                icon="refresh"
                                size='sm'
                                />
                            </div>
                          </div>
                      </div>
                    </form>

and clicking on the submit button triggers the following code:

    runQueryTopGames: async function () {
      if (this.$refs.noOfTopGamesField.error === false) {
        this.topGames = []
        try {
          this.topGames = await twLib.getTopGamesInfo(this.noOfTopGames)
        } catch (error) {
          this.$root.$emit('userNotify', 'No Data Found', "There don't seem to be any top games.", 'error')
          console.log('error: ' + error)
        }
      }
    }

I now have the following issue:

When i start the application and execute the form for the first time, it leads to a refresh of the page. From the second time onwards, it works as expected.

I have no idea why the refresh is done?

anyone?

Best
Michael

Just in case anyone else is interested. I was able to solve it like this:

                        <div v-if="topGamesGridMode === false">
                          <q-table
                            dark
                            bordered
                            color="accent"
                            card-class="bg-primary"
                            :style="{ color: localTextColor1 }"
                            title="Top Games"
                            :data="topGames"
                            :columns="topGamesColumns"
                            :pagination.sync="topGamesPagination"
                            row-key="id"
                          >
                            <template v-slot:body-cell-boxShot="boxShot">
                              <q-td :props="boxShot">
                                <div>
                                  <q-img :src='boxShot.value' basic />
                                </div>
                              </q-td>
                            </template>
                          </q-table>
                        </div>
                        <div v-else>
                          <q-table
                            grid
                            dark
                            bordered
                            color="accent"
                            card-class="bg-primary"
                            :style="{ color: localTextColor1 }"
                            title="Top Games"
                            :data="topGames"
                            :columns="topGamesColumns"
                            :pagination.sync="topGamesPaginationGrid"
                            row-key="id"
                          >
                            <template v-slot:item="props">
                              <q-card bordered dark class="q-ma-sm tileBGColor" style="max-width: 300px; min-width: 300px">
                                <div class="q-ma-sm" v-for="col in props.cols" :key="col.id">
                                  <div v-if="col.label === 'Box Shot'">
                                    <q-img :src='col.value' basic />
                                  </div>
                                  <div v-if="col.label === 'Game Name'">
                                    <div class="text-h6">
                                      {{col.value}}
                                    </div>
                                  </div>
                                  <div v-if="col.label === '# of Viewers'">
                                    <div class="row text-h8">
                                      <div class="column col-4">Viewers:</div>
                                      <div class="column">{{col.value}}</div>
                                    </div>
                                  </div>
                                  <div v-if="col.label === '# of Channels'">
                                    <div class="row text-h8">
                                      <div class="column col-4">Channels:</div>
                                      <div class="column">{{col.value}}</div>
                                    </div>
                                  </div>
                                </div>
                              </q-card>
                            </template>
                          </q-table>
                        </div>

Cheers,
Michael

Hi all

I show images in a table which works fine in the normal table mode. If I set the grid mode though, the URL is displayed instead of the image. Here’s the code:

<div v-if="topGamesGrid === false">
                          <q-table
                            dark
                            bordered
                            color="accent"
                            card-class="bg-primary"
                            :style="{ color: localTextColor1 }"
                            title="Top Games"
                            :data="topGames"
                            :columns="topGamesColumns"
                            :pagination.sync="topGamesPagination"
                            row-key="id"
                          >
                            <template v-slot:body-cell-boxShot="boxShot">
                              <q-td :props="boxShot">
                                <div>
                                  <q-img :src='boxShot.value' basic />
                                </div>
                              </q-td>
                            </template>
                          </q-table>
                        </div>
                        <div v-else>
                          <q-table
                            grid
                            dark
                            bordered
                            color="accent"
                            card-class="bg-primary"
                            :style="{ color: localTextColor1 }"
                            title="Top Games"
                            :data="topGames"
                            :columns="topGamesColumns"
                            :pagination.sync="topGamesPagination"
                            row-key="id"
                          >
                            <template v-slot:body-cell-boxShot="boxShot">
                              <q-td :props="boxShot">
                                <div>
                                  <q-img :src='boxShot.value' basic />
                                </div>
                              </q-td>
                            </template>
                          </q-table>
                        </div>

Any ideas why that is?

Cheers,
Michael

The code still does this:

             <div v-if="infoBlock.channelUrl !== '' ">
                <q-card-section class="q-ma-xs infoBlock">
                <q-img
                  :src='infoBlock.image'
                  basic
                  @click='imgClicked(infoBlock.channelUrl)'
                >
                </q-img>
                </q-card-section>
              </div>
              <div v-else>
                <q-card-section class="q-ma-xs" >
                <q-img
                  :src='infoBlock.image'
                  basic
                  @click='imgClicked(infoBlock.channelUrl)'
                >
                </q-img>
                </q-card-section>
              </div>

I’m doing it on the card section that wraps the image…

@metalsadman Interesting…although this gives me a different effect:

Now the image is included in the highlighting…:o

@metalsadman yep, that’s what I did…see code below

@metalsadman Thanks for the tip.

I found a way which kinda also works for me:

            <div v-if="infoBlock.channelUrl !== '' ">
                <q-card-section class="q-ma-xs infoBlock">
                <q-img
                  :src='infoBlock.image'
                  basic
                  @click='imgClicked(infoBlock.channelUrl)'
                >
                </q-img>
                </q-card-section>
              </div>
              <div v-else>
                <q-card-section class="q-ma-xs" >
                <q-img
                  :src='infoBlock.image'
                  basic
                  @click='imgClicked(infoBlock.channelUrl)'
                >
                </q-img>
                </q-card-section>
              </div>

and this on the scss side:

.infoBlock {
    background-color:(var(--q-color-primary))
}
.infoBlock:hover {
  background-color:(var(--q-color-accent))
}

Although I don’t like the duplicated code…

I’ll give @mouseover a shot too.

Cheers,
Michael

PS: This is the result: