0

I have created the custom tab as given below , how can i store the name of the active tab value in a variable in my JS file.

even when user switch tab , label of the current tab should get stored in the variable of the JS file.

Below is the code:

    <template>
        <lightning-tabset class='slds-tabs_default' active-tab-value='Item One'>
            <lightning-tab label="Item One" value="1" default>
                Here's the content for Item One:
                
            </lightning-tab>
            <lightning-tab label="Item Two" value="2">
                Here's the content for Item Two:
                
            </lightning-tab>
            <lightning-tab label="Item 3" value="3">
                Here's the content for Item Two:
                
            </lightning-tab>
            <lightning-tab label="Item 4" value="4">
                Here's the content for Item Two:
                
            </lightning-tab>
        </lightning-tabset>
    </template>

import { LightningElement } from 'lwc';

export default class ActiveTabExample extends LightningElement {

    @track activetabContent = '';

  
    
}

Whenever user changes the tab activetabContent must get updated with the current tab in the UI

0

Handle the onactive event to get the active tab and assign the value to active-tab-value in tabset. Also no need of track decorator since all fields are reactive now with new release except field that contains an object or an array.

<template>
    <lightning-tabset class='slds-tabs_default' active-tab-value={activetabContent}>
        <lightning-tab label="Item One" value="1" default onactive={tabChangeHandler}>
            Here's the content for Item One:
            
        </lightning-tab>
        <lightning-tab label="Item Two" value="2" onactive={tabChangeHandler}>
            Here's the content for Item Two:
            
        </lightning-tab>
        <lightning-tab label="Item 3" value="3" onactive={tabChangeHandler}>
            Here's the content for Item Two:
            
        </lightning-tab>
        <lightning-tab label="Item 4" value="4" onactive={tabChangeHandler}>
            Here's the content for Item Two:
            
        </lightning-tab>
    </lightning-tabset>
</template>

import { LightningElement } from 'lwc';

export default class ActiveTabExample extends LightningElement {

    activetabContent = '';

    tabChangeHandler(event) {
 
       this.activetabContent  = event.target.value;
    }

}
| improve this answer | |
1

You can use on active event to get active tab

<lightning-tab label="Item One" value="1" default onactive={handleActiveTab}>
                Here's the content for Item One:
                
</lightning-tab>
 handleActiveTab(event) {
     
    this.activetabContent  = event.target.label;
  }
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.