No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. Dennis van Beek
    • Profile
    • Following 0
    • Followers 0
    • Topics 9
    • Posts 19
    • Best 2
    • Groups 0

    Dennis van Beek

    @Dennis van Beek

    2
    Reputation
    14
    Profile views
    19
    Posts
    0
    Followers
    0
    Following
    Joined Last Online
    Location The Netherlands

    Dennis van Beek Follow

    Best posts made by Dennis van Beek

    • RE: Q-input doesn't display the values if q-input loses focus.

      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.

      posted in Framework
      Dennis van Beek
      Dennis van Beek
    • Dynamic disabling of list items no longer function after upgrade to v2

      Since I updated my project to Quasar v2, all list items are disabled.

      At this moment, I use a prop ‘enabled’ to enable or disable the item, like this:

      <q-item ... :disabled="!enabled">
      

      …but all items are always disabled.

      It makes no difference what I try, for example this will also disable it:

      <q-item ... :disabled="false">
      

      Do I have to change my code, or is this a bug in Quasar v2?

      PS: As a work-around, I now use this code:

      <q-item ... :class="enabled ? '' : 'disabled'">
      
      posted in Framework
      Dennis van Beek
      Dennis van Beek

    Latest posts made by Dennis van Beek

    • Dynamic disabling of list items no longer function after upgrade to v2

      Since I updated my project to Quasar v2, all list items are disabled.

      At this moment, I use a prop ‘enabled’ to enable or disable the item, like this:

      <q-item ... :disabled="!enabled">
      

      …but all items are always disabled.

      It makes no difference what I try, for example this will also disable it:

      <q-item ... :disabled="false">
      

      Do I have to change my code, or is this a bug in Quasar v2?

      PS: As a work-around, I now use this code:

      <q-item ... :class="enabled ? '' : 'disabled'">
      
      posted in Framework
      Dennis van Beek
      Dennis van Beek
    • RE: Q-input doesn't display the values if q-input loses focus.

      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.

      posted in Framework
      Dennis van Beek
      Dennis van Beek
    • RE: Home link style in a Layout Drawer

      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>
      
      posted in Framework
      Dennis van Beek
      Dennis van Beek
    • Problem with q-editor

      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.

      posted in Framework
      Dennis van Beek
      Dennis van Beek
    • Render-problem in q-avatar on iPhone

      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:
      f61288b6-5821-4ef2-b668-4952a38156f4-image.png

      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)

      posted in Framework
      Dennis van Beek
      Dennis van Beek
    • RE: [solved] Two scroll areas in a page-container

      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>
      
      posted in Framework
      Dennis van Beek
      Dennis van Beek
    • [solved] Two scroll areas in a page-container

      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?

      posted in Framework
      Dennis van Beek
      Dennis van Beek
    • RE: QSelect: Use the selected value for re-filtering

      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 />
      
      posted in Framework
      Dennis van Beek
      Dennis van Beek
    • QSelect: Use the selected value for re-filtering

      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
      posted in Framework
      Dennis van Beek
      Dennis van Beek
    • RE: Calling v-close-popup from QSelect-option

      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 🙂

      posted in Framework
      Dennis van Beek
      Dennis van Beek