get current selected tab

[Sabina Muminovic]

To Whom It May Concern,

I am having a parent component that looks like this (shown in attachment)

Inside these components (Component1 and Component2) there are a different texts that should have been shown out of this main component. In order to achieve that, I need an information inside those components (and their parent component) which one of these is currently active?

What would be the easiest way to get currently active Tab?

Thanks!

<template>

  <div>

    <ejs-tab id="mainTabComponent">

      <div class="e-tab-header">

        <div>Component 1</div>

        <div>Component 2</div>

      </div>

      <div class="e-content">

        <div>

          <Component1></Component1>

        </div>

        <div>

          <Component2></Component2>

        </div>

      </div>

    </ejs-tab>

  </div>

</template>

<script lang="ts">

import { enableRipple } from "@syncfusion/ej2-base";

import { defineComponent } from "@vue/composition-api";

import Component1 from "./component1.vue";

import Component2 from "./component2.vue";

import { TabComponent } from "@syncfusion/ej2-vue-navigations";

import $ from "jquery";

export default defineComponent({

  components: {

    "ejs-tab": TabComponent,

    Component1,

    Component2,

  },

  setup() {

    return {};

  },

});

</script>

<style lang="scss"></style>

[Satheesh Kumar Balasubramanian]

Hi Sabina, 

  

Greetings from Syncfusion Support..! 

  

We have validated your reported query "get current selected tab" at our end and achieved your requirement using tab selected event and selectedItem property. We have prepared a sample for your reference in which we have get the current active tab index on tab selection and on external button click for your reference, which can be viewed from the following link. 

 

Sample: https://codesandbox.io/s/vue-tab-template-x0kxd?file=/src/App.vue 

  

Code Snippet:  

<template> 

  <div> 

    <div> 

      <div class="btn-container"> 

        <button id="getDetails" class="e-btn" v-on:click="btnClicked"> 

          Get Details 

        </button> 

      </div> 

      <H1> Tab </H1> 

      <ejs-tab id="tab_default" :selected="tabSelected"> 

      ... 

      ... 

      </ejs-tab> 

    </div> 

  </div> 

</template> 

  

<script> 

import Vue from "vue"; 

import { TabPlugin } from "@syncfusion/ej2-vue-navigations"; 

  

Vue.use(TabPlugin); 

  

export default Vue.extend({ 

  data: function () { 

    return {}; 

  }, 

  mounted: function () { 

    return this.activeIndex; 

  }, 

  methods: { 

    tabSelected: function (e) { 

      this.activeIndex = e.selectedIndex; 

      console.log(this.activeIndex); 

    }, 

    btnClicked: function (args) { 

      let tabObj = document.getElementById("tab_default"); 

      this.activeIndex = tabObj.ej2_instances[0].selectedItem; 

      console.log(this.activeIndex); 

    }, 

  }, 

  name: "App", 

  components: {}, 

}); 

</script> 

  

  

Kindly try the above sample and get back to us, if you need further assistance.   

    

Regards,    

Satheesh Kumar B