update badges in tabs



  • Hey guys,

    I have been playing around with quasar for about a week steadily and coming from ionic, I am impressed by the performance so far - at least with the things that I needed to build.

    Currently I am at a point where I do not really know where to look for an answer, so I thought I will give it a try here.

    What I achieved so far:

    • I started building an instagram clone app to learn more about the concepts of vue and quasar
    • built a layout with tabs and leftdrawer menu
    • routing is done via lazy loading (pages are loaded through the layout.vue as well)
    • so far I got the timeline/wall, the profile page and a visitors page

    What I want to do next:

    • implement notification badges on the tab icons (like you are used to from facebook, whatsapp and so forth, to me that is best practice)
    • with every page opening (so whenever I click a tab icon) i want to do an ajax call in the background and then update the numbers in the badges accordingly

    What I dont know where to start:

    • where would I put such an ajax call?
    • i successfully use ajax calls in each page to get the necessary content so far, so I thought i could put my new call there as well BUT:
      How would I update the tab badges inside layout.vue from a page? I dont know how to access those from there.

    But I guess I am just coming from the wrong angleโ€ฆ so what is the best practice for vue/quasar?



  • 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 ๐Ÿ™‚



  • 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.



  • There are few concepts which might be helpful:

    1. computed setters:

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

    1. @input event in QTabs API:

    https://quasar.dev/vue-components/tabs#QTabs-API



  • You could use vuex too.



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



  • you can use such code as a mixin in both components and keep state in vuex. In both component you will have access to actual, reactive state from Vuex - without any mystic events:

    import { mapGetters, mapMutations } from 'vuex'
    
    export default {
      computed: {
        ...mapGetters(['getUILeftDrawerOpen']),
        leftDrawerOpen: {
          get () {
            return this.getUILeftDrawerOpen
          },
          set (value) {
            this.setUILeftDrawerOpen(value)
          }
        }
      },
      methods: {
        ...mapMutations(['setUILeftDrawerOpen'])
      }
    }
    


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



  • @pureblood said in 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!

    Yep ๐Ÿ™‚ ALWAYS vuex when you have even a slightly smell of shared state. As a bonus you have reactive properties, namespaced state hierarchy, transactions (something like), version history (in chrome extension), debugging, easy persistence etc. The downside is that vuex is declarative BUT there are many extensions, tools, good practices as of yet. For example I recommend using this:
    https://vuex-orm.github.io/vuex-orm/guide/prologue/what-is-vuex-orm.html
    And a rule of thumb: if you think about using events in vue then probably there is another solution (reactive). Thinking in events is โ€œold wayโ€. Thinking in reactive data models is โ€œvue wayโ€. Of course events ARE useful, but when you need to communicate action (ie click, hide, move, ), not share state. When you think about event โ€œchangeโ€ - you are probably dealing with hidden state.



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


Log in to reply