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. pureblood
    P
    • Profile
    • Following 0
    • Followers 0
    • Topics 2
    • Posts 13
    • Best 0
    • Groups 0

    pureblood

    @pureblood

    0
    Reputation
    10
    Profile views
    13
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    pureblood Follow

    Latest posts made by pureblood

    • scrollbehavior savedposition - how does it work?

      Hey guys,
      coming from angular/ionic I am having a little trouble to understand the right setup.

      By default my quasar apps behave like this:

      • create a popstate navigation
      • open a page and scroll far down
      • navigate forward (popstate) and hit browsers back button
      • end up on previous page but at top not as (expected) scrolled Position

      I tried a few things so far like:

      • quasar.conf.js activating vueRouterMode: β€˜history’,
      • changed router/index.js to:
        const Router = new VueRouter({
          //scrollBehavior: () => ({ x: 0, y: 0 }),
          scrollBehavior: (to, from, savedPosition) => new Promise((resolve) => {
            const position = savedPosition || {};
            if (!savedPosition) {
              if (to.hash) {
                position.selector = to.hash;
              }
              if (to.matched.some((m) => m.meta.scrollToTop)) {
                position.x = 0;
                position.y = 0;
              }
            }
            Router.app.$root.$once('triggerScroll', () => {
              Router.app.$nextTick(() => resolve(position));
            });
          }),
      
          routes,
      

      sadly those two did not do the trick. I am pretty sure that is a basic misunderstanding in regards to vue on my end.
      Anyone able to help me get back on track?

      posted in Help
      P
      pureblood
    • RE: update badges in tabs

      ok, I agree I need to dig into that next πŸ™‚

      posted in Help
      P
      pureblood
    • RE: update badges in tabs

      @qyloxe ok understood - so still the vuex way πŸ™‚
      that I found out about in my second post (see above), I thought you meant that there was another way aside vuex or global bus events.

      so for now, there are two ways. global (mystic) bus events and vuex πŸ™‚
      thanks!

      posted in Help
      P
      pureblood
    • RE: update badges in tabs

      @qyloxe said in update badges in tabs:

      https://vuejs.org/v2/guide/computed.html#Computed-Setter

      how so?
      Maybe I am not getting it really, but this sounds the wrong way around.

      • tabs are in layout.vue
      • the trigger functions to update the tabs are in every other component.

      the @input of tabs will be fired within layout vue wont it? how can I access it from another component then?

      posted in Help
      P
      pureblood
    • RE: Quasar v1.3.0 released!

      @rstoenescu thank you for the infinite scroll update!!

      posted in Announcements
      P
      pureblood
    • RE: update badges in tabs

      A succesfull day on my own:
      https://quasar.dev/options/global-event-bus#Introduction

      I was able to just use the global event bus from quasar as a solution.

      Easy thing once you found it:
      For each badge counter that I have in my layout, I create an event to keep it updated throughout the app.
      On each screen (or later by push) I emit an event with the current counter and that updates the badge automatically.

      Solved.

      posted in Help
      P
      pureblood
    • RE: update badges in tabs

      I tried googleing for a day and I guess (have no clue so far) that vuex might be a thing for such a challenge. Will dig a little deeper within the next days, what this vuex is all about πŸ™‚

      posted in Help
      P
      pureblood
    • RE: Quasar v1.3.0 released!

      @metalsadman
      great! thank you!

      posted in Announcements
      P
      pureblood
    • RE: Quasar v1.3.0 released!

      Newbie question:
      how would I update a quasar project that I started two weeks back?

      posted in Announcements
      P
      pureblood
    • RE: How to combine "pull to refresh" and "infinite scroll"

      @rstoenescu
      Hey thank you for showing the neccessary nesting of both functionalities.
      Sadly I was not able to combine infinite scroll and push to refresh from the current github examples 😞

      I achieved something though:

      • infinite scroll is working
      • pull to refresh is working once (but done() call is not respected and therefore the spinning icon never disappears)
      
      <template>
      <div>
        <div class="q-pa-md">
      <q-pull-to-refresh @refresh="refresh">
          <q-infinite-scroll @load="onLoad" :offset="250">
      
      
            <div v-for="(itemPull, indexPull) in itemsPull" :key="indexPull" class="q-mb-sm">
              <q-badge color="secondary">
               Pull {{ itemsPull.length + indexPull }}
              </q-badge>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            </div>
      
      
      
          <div v-for="(itemInfi, indexInfini) in itemsInfini" :key="indexInfini" class="caption">
              <q-badge color="secondary">
              Infini{{ itemsPull.length - indexInfini }}
              </q-badge>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          </div>
      
      
      
          <template v-slot:loading>
            <div class="row justify-center q-my-md">
              <q-spinner-dots color="primary" size="40px" />
            </div>
          </template>
          </q-infinite-scroll>
       </q-pull-to-refresh>
      
      
      
      
        </div>
      
      </div>
      
      </template>
      
      <script>
      export default {
        data () {
          return {
            itemsPull: [],
            itemsInfini : [{}, {}, {}, {}, {}, {}, {}, {}, {}]
          }
        },
        methods: {
          refresh (index, done) {
            setTimeout(() => {
              this.itemsPull.push({}, {}, {}, {}, {}, {}, {})
              done()
            }, 1000)
          },
          onLoad (index, done) {
            setTimeout(() => {
              if (this.itemsInfini) {
                this.itemsInfini.push({}, {}, {}, {}, {}, {}, {})
                done()
              }
            }, 2000)
          }
        }
      }
      </script>
      
      

      ERROR:
      Test.vue?c961:56 Uncaught TypeError: done is not a function
      at eval

      Somehow done() is not known when both features are combined. Any idea how to fix this?

      posted in Framework
      P
      pureblood