Print Page - Firing tabSelect Event

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

Code:

<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.

Code:

<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.

EasyUI Forum

General Category => EasyUI for Vue => Topic started by: Pavel on January 20, 2021, 01:37:27 PM