Firing tabSelect Event

[Pavel]

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?

[jarry]

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>

[Pavel]

Thank you!
I forgot "@"

[Pavel]

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.