Title: Firing tabSelect Event
Post by: Pavel on January 20, 2021, 01:37:27 PM
Hello everybody! I want to bind some code to selecting tab event.Please see code below <template>
<div id="App">
<Layout style="width: 100%; height: 100%">
<LayoutPanel region="center" style="height: 580px">
<Tabs style="height: 100%">
<TabPanel title="Panel 1" :tabSelect="tbSlct()"> Panel 1 </TabPanel>
<TabPanel title="Panel 2"> Panel 2 </TabPanel>
<TabPanel title="Panel 3"> Panel 3 </TabPanel>
</Tabs>
</LayoutPanel>
</Layout>
</div>
</template>
<script>
export default {
methods: {
tbSlct: function () {
console.log("tbSlct");
},
},
};
</script>
But tbSlct method executed once when page load. Unselecting and selecting tabs are not causing executing method tbSlct. What should I do?
Title: Re: Firing tabSelect Event
Post by: jarry on January 20, 2021, 07:42:30 PM
Please try this code instead. <template>
<div id="App">
<Layout style="width: 100%; height: 100%">
<LayoutPanel region="center" style="height: 580px">
<Tabs style="height: 100%" @tabSelect="onTabSelect($event)">
<TabPanel title="Panel 1">Panel 1</TabPanel>
<TabPanel title="Panel 2">Panel 2</TabPanel>
<TabPanel title="Panel 3">Panel 3</TabPanel>
</Tabs>
</LayoutPanel>
</Layout>
</div>
</template>
<script>
export default {
methods: {
onTabSelect(tab){
console.log(tab)
}
}
};
</script>
Title: Re: Firing tabSelect Event
Post by: Pavel on January 21, 2021, 02:05:13 AM
Thank you!
I forgot "@"
Title: Re: Firing tabSelect Event
Post by: Pavel on January 21, 2021, 12:44:10 PM
One more question:
Can I get some unique property of tab in onTabSelect that i set for tab in template? Something like key or id? Not _uid.
|