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

    update badges in tabs

    Help
    3
    10
    682
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • P
      pureblood last edited by

      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?

      1 Reply Last reply Reply Quote 0
      • P
        pureblood last edited by

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

        1 Reply Last reply Reply Quote 0
        • P
          pureblood last edited by

          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.

          1 Reply Last reply Reply Quote 0
          • qyloxe
            qyloxe last edited by qyloxe

            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

            P 1 Reply Last reply Reply Quote 0
            • metalsadman
              metalsadman last edited by

              You could use vuex too.

              1 Reply Last reply Reply Quote 0
              • P
                pureblood @qyloxe last edited by

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

                1 Reply Last reply Reply Quote 0
                • qyloxe
                  qyloxe last edited by

                  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'])
                    }
                  }
                  
                  P 1 Reply Last reply Reply Quote 0
                  • P
                    pureblood @qyloxe last edited by

                    @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 1 Reply Last reply Reply Quote 0
                    • qyloxe
                      qyloxe @pureblood last edited by qyloxe

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

                      1 Reply Last reply Reply Quote 0
                      • P
                        pureblood last edited by

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

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post