TabView - example of panel reacting to being activated

[llange]

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 !

[cagatay.civici]

Actually TabMenu is meant for this;

https://primefaces.org/primevue/showcase/#/tabmenu

But TabView has tab-change callback that you may use to do initialization work by getting the selected tab from the event.

[User1@1]

Hi Team,

I am using Tab view to display the data in the three tab panels.Each of the panel is housing a component.The ng oninit() of the component inside the panel is called when tab is switched.There is api call I am making to load the data in ngOninit() in every component. So when we swtich the tab an api call is made to get the fresh data and is diaplyed in the table.Presently with <ng-template > inside the panel we are able to perform lazy loading correctly but the problem is at the initail load ,when we load the page first time , the ngOnint() of the first tab (with selected =true ) is called twice and api call is happening twice.Below is the code ,Kindly suggest if anything is wrong here.

<p-tabView #tabview (onChange)="handleChange($event)" dynamic="true" cache="true" [(activeIndex)]="index">
<p-tabPanel header="Traditional" dynamic="true">
<ng-template pTemplate="content">
<app-tradtional-offers *ngIf="activeTab == 0"></app-tradtional-offers>
</ng-template>
</p-tabPanel>
<p-tabPanel #panel2 header="Auction" dynamic="true">
<ng-template pTemplate="content">
<app-auction-offers *ngIf="activeTab === 1"
(auctionOffersTabChangedEvent)="switchToBackUpTab($event)"
></app-auction-offers>
</ng-template>
</p-tabPanel>
<p-tabPanel #panel3 header="Back up" dynamic="true">
<ng-template pTemplate="content">
<app-backup-offers *ngIf="activeTab === 2" ></app-backup-offers>
</ng-template>
</p-tabPanel>
</p-tabView>

handleChange(e) {
this.activeTab = e.index;
}

[cagatay.civici]

That looks like Angular and PrimeNG not Vue.