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?

ok, I agree I need to dig into that next

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

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

@rstoenescu thank you for the infinite scroll update!!

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.

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

@metalsadman
great! thank you!

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

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