Tabs event before leave the tab

  • I want to know when a user clicks another tab and before the new tab is loaded.

    I have 3 tabs, one of them has form components. If a user changes some of the form elements and clicks another tab, I want to know and ask her/him if they want to save the new data before Quasar loads the new tab. I can’t find any event for that in the tabs components. Is it possible?

  • I am using q-route-tab and I use a store with attribute called currentPage. From my content pages, I set currentPage to the name of the new page (as selected by the tab) in the created function. Any watcher ( watch: ) will get notified of the change.
    Is that what you are trying to achieve?

  • I use a similar solution but that moment it’s too late because the new tab has already loaded by Quasar. I need to be triggered before loading to the new tab.

  • You can alway use the global message event system: this.$root.$emit

    beforeDestroy: function () {
      this.$root.$emit('tab:closing', this.myTabName)
    beforeMount: function () {
      this.$root.$on('tab:closing', this.onTabClosing)
    beforeDestroy: function () {
      // alway turn off global event listener
      this.$root.$off('tab:closing', this.onTabClosing)
    methods: {
      onTabClosing: function (tabName) {
        // do something

    Hope that might help…

  • Thank you @Hawkeye64 I think It’ll help me, I’ll investigate it.

Log in to reply