Without the code it’s difficult to specify the problem…

Are you using v-model on the components, or :value and @input?

Maybe the javascript-console will show some errors and/or warnings where you can find some clue’s?

Otherwise share the code, so we can help you better.

Without the code it’s difficult to specify the problem…

Are you using v-model on the components, or :value and @input?

Maybe the javascript-console will show some errors and/or warnings where you can find some clue’s?

Otherwise share the code, so we can help you better.

If I understand you correctly, you can just make it white with a class (class=“text-white (or class=“bg-white”, if you mean the background))”.

<router-link to="/" class="text-white">App Name</router-link>

Hi,

We have a form with a multi-language q-editor field, but when switching tabs, it does not re-render. I have tried in many different ways, but I always end up with the same problem.
The problem only occurs with the last entered language, the previous languages have no problem.

Also, the problem only occurs with the q-editor, with a q-input it works without problems.

The model for the q-editor is a computed property, because the supported languages are dynamic and it may be empty or partially or completely available.

It’s hard to describe the problem exactly, but I’ll try anyway:
With one text:

• enter a text in one language
• select a different tab
• go back
  => the text is missing

With two texts:

• enter text in one language
• enter text in a 2nd language
• go back to the first language
  => it displays ok
• go back to the 2nd language
  => the text of the 1st language remains visible

I have (strongly) simplified the vue-page, to illustrate the problem:

<template>
  <div>
    <q-tabs v-model="selectedLanguage">
      <q-tab v-for="language of langOptions" :key="language.value" :name="language.value" :label="language.label" />
    </q-tabs>
    <q-editor v-model="translation.description" min-height="5rem" :disable="!selectedLanguage" @input="changeIt" />
<!--    <q-input v-model="translation.description" outlined :disable="!selectedLanguage" @input="changeIt" />-->
    <pre>{{serverObject}}</pre>
    <span>Value for {{selectedLanguage}}: {{translation.description}}</span>
  </div>
</template>

<script>
import languages from 'quasar/lang/index.json'

export default {
  data () {
    return {
      langOptions: [],
      selectedLanguage: 'en-us',
      serverObject: {
        translations: []
      }
    }
  },
  computed: {
    translation () {
      return this.serverObject.translations.find(t => t.language === this.selectedLanguage) || { description: '' }
    }
  },
  methods: {
    changeIt () {
      // this can also be a watch
      if (this.selectedLanguage && !this.translation.language) {
        this.translation.language = this.selectedLanguage
        this.serverObject.translations.push(this.translation)
      }
    }
  },
  mounted () {
    this.langOptions = languages.filter(lang => ['en-us', 'nl', 'ro'].includes(lang.isoName)).map(lang => ({
      label: lang.nativeName,
      value: lang.isoName
    }))
  }
}
</script>

The problem probably is a combination of the q-editor and my computed object, but I don’t know what’s the best way to solve it.

Maybe the problem would be solved if I create the complete model on mount, for all supported languages, so there’s nu more need to push new translations to the serverObject on change, but I’d rather not send empty translations to the server, so I have to filter them out againg. And then it seems a bit overkill to do this.

Hi,

We have problems with the re-rendering of a q-avatar on an iPhone…
When the amount changes, the previous number stays visible when it is larger the the current number:

The code is pretty straight-forward (itemCount is computed):

<div v-if="itemCount" class="absolute-right q-pr-sm q-pt-xs text-bold">
  <q-avatar size="sm" color="primary" text-color="white">{{itemCount}}</q-avatar>
</div>

On a desktop the problem cannot be reproduced.

Any thoughts?

(versions: quasar: 1.14.0 / quasar/app: 1.9.6)

This seems to work (of course, after removing the q-pages from the router views):

<template>
  <q-layout>
    <q-page-container>
      <q-page class="flex row">
        <q-scroll-area class="col bg-yellow">
          <router-view name="navigation" class="bg-grey-3" />
        </q-scroll-area>
        <q-scroll-area class="col bg-light-blue">
          <router-view name="details" />
        </q-scroll-area>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

Hello,

Maybe it’s not the correct way to do it, but I was hoping to wrap my q-page’s in q-scroll-area’s, because I would like both pages to be able to scroll independent of each other.

This works perfectly for one (left or right), but not for both.

So, i.e. this works for the left side:

<template>
  <q-layout >
    <q-page-container class="flex row">
      <!-- Left side -->
      <q-scroll-area class="col bg-yellow">
        <router-view name="navigation" class="col" />
      </q-scroll-area>
      <!-- Right side -->
      <router-view name="details" class="col" />
    </q-page-container>
  </q-layout>
</template>

But if I try it for both pages, the whole screen is blank, and nothing is displayed:

<template>
  <q-layout>
    <q-page-container class="flex row">
      <!-- Left side -->
      <q-scroll-area class="col bg-yellow">
        <router-view name="navigation" class="col" />
      </q-scroll-area>
      <!-- Right side -->
      <q-scroll-area class="col bg-light-blue">
        <router-view name="details" class="col" />
      </q-scroll-area>
    </q-page-container>
  </q-layout>
</template>

What’s the best way to solve this?

My bad (RTFM)… Adding ‘fill-input hide-selected’ gives me the desired functionality!

<q-select v-model="userInput" :label="label" use-input @filter="filter" @input="input" :options="options" fill-input hide-selected />

Hi, I don’t understand the default implementation of the QSelect with a filter (just single select).

The component works fine for the initial selection, but if the user wants to change what he has selected, the previous selected value stays in the filter-input.
This is very complicating for the users, when they want to change this text (and re-filter) to select a different item.

I think this only useful in ‘multiple’ mode, not on a single select filtered QSelect.

Is there a way for me to work around this?
Or maybe something can be changed in this component to at least configure it to use the previous selected value as filter?

The example on the Quasar page shows what I mean:
https://quasar.dev/vue-components/select#Example--Show-options-in-menu

• Select the component (Simple filter)
• Type something (i.e. ‘Ap’)
• Select Apple
• Select the component again
• Try to change Apple using the keyboard

This is a good solution, but I wonder if my solution is good/efficient:

In my situation the menu is a context menu, dynamically generated on a (navigation) QTree and a (search) QTable.

Because the tree and table may change a lot, I cannot give a unique reference to all menus (because the references in the page will continue to grow).
So I use a reference array and close all currently existing menus (even though only one can be open):

this.$refs.contextMenu.forEach(e => e.hide())

Secondaly, as far as I know (but I hope that’s my lack of knowledge) a reference array is only created from a v-for loop, which I don’t have in the QTree.
I solved this by looping one time for every branch:

<q-tree ...>
  <template v-slot:default-header="{ node }">
    ...
    <template v-for="item of 1">
      <q-menu :key="item" context-menu ref="contextMenu">
        ...
      </q-menu>
    </template>
  </template>
</q-tree>

If there is a better way to solve (one of) these problems, I’m eager to know