Is there a way to activate a method only when the q-tab is selected?



  • I wanted to avoid using q-route-tab (having a new route), however I need to activate a certain method (that would fetch data from my server) only when the tab is selected. Right now, I see that it activates the method whenever the page is loaded. Is there a way to avoid that? Perhaps an “is-selected” as a prop on q-tab-pane?

    Thank you.



  • Use q-tab and use the @select event to handle your fetch.



  • I ended up adding a @select="selected = true" to the q-tab and :selected="selected"to the component containing the q-tab-pane, which watches this prop. If the prop selected equals true, then it fetches the data from server.



  • Why not @select="fetchDataFromServer"???

    fetchDataFromServer: function () {
        // fetch data from the server
    }