(warning: vue.js and PrimeVue newbie here - so please bear with me if I am plain wrong)
I'm building a TabView consisting of (multiple) TabPanels.
By choice, each TabPanel only contains a component:
So I have a "Status.vue" and an "Admin.vue" single-file components that implement what I want.
Code: Select all
<TabView id="hometab"> <TabPanel header="Status" id="status" styleClass="tab-status"> <Status /> </TabPanel> <TabPanel header="Admin" id="admin" styleClass="tab-admin" :disabled="!isAuthenticated"> <Admin /> </TabPanel> </TabView>
It seems that these components (inside the TabPanel) are created, mounted, ... at the same time as the TabView, so it means that they are always active, even if their own tab is not selected (which makes perfect sense).
However I'd like to be able to pass an event to each component whenever their own tab is selected (and unselected) so that they can trigger some behaviour (like refreshing data, ...)
I'm still learning Vue and it's environment (slots, props, events, ...) so until now I still haven't figured how to do that (and even if it's the "Vue" way of handling the problem).
So if anyone has some experience on the matter and would like to share it, I'l be able to grab some more Vue knowledge today.
(Note: I understood that TabMenu could be one kind of solution to that setup, but I'd like to solve my riddle with TabView first).
Thanks in advance !