TabView - example of panel reacting to being activated

UI Components for Vue
Post Reply
llange
Posts: 3
Joined: 15 May 2020, 14:47

17 May 2020, 22:48

Hello,

(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:

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>
So I have a "Status.vue" and an "Admin.vue" single-file components that implement what I want.

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 !

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests