Skip to main content

I have a lighting tabsetlightning-tabset with three tabs, problem is the active-tab-value of the lightning tabset, I wish to set it's value based on a boolean value that Im setting in connectedCallBAckconnectedCallback but it picks the global variable value. I cannot understand why this is happening

<template>
    <lightning-tabset active-tab-value = {activetabVal}>
        <lightning-tab value = 'one' label="Item One">
            One Content !
        </lightning-tab>
        <lightning-tab label="Item Two" value = 'two' title="2nd tab extended title">
            Two Content !
        </lightning-tab>
        <lightning-tab label="Item Three" value = 'three'>
            Three Content !
        </lightning-tab>
    </lightning-tabset>
</template>
<template>
    <lightning-tabset active-tab-value = {activetabVal}>
        <lightning-tab value = 'one' label="Item One">
            One Content !
        </lightning-tab>
        <lightning-tab label="Item Two" value = 'two' title="2nd tab extended title">
            Two Content !
        </lightning-tab>
        <lightning-tab label="Item Three" value = 'three'>
            Three Content !
        </lightning-tab>
    </lightning-tabset>
</template>
export default class TabsetBasic extends LightningElement {

    boolVal;   // this controls the active-tab-value behaviour

    connectedCallback(){
        this.cv();
    }
    cv (){
        this.boolVal = true;  // not controlling the active-tab-value behaviour
    }
      activetabVal=  (this.boolVal)? 'two': 'three';

}
export default class TabsetBasic extends LightningElement {

    boolVal;   // this controls the active-tab-value behaviour

    connectedCallback(){
        this.cv();
    }
    cv (){
        this.boolVal = true;  // not controlling the active-tab-value behaviour
    }
      activetabVal=  (this.boolVal)? 'two': 'three';

}

the class level variable boolValboolVal if I switch the boolean values between true and false the default tab functionality works, but if I set it in connectedCallBackconnectedCallback and keep switching the boolean values it doesnt work, the activeTabValueactiveTabVal is picking the global variable value. Why is this happening?

I have a lighting tabset with three tabs, problem is the active-tab-value of the lightning tabset, I wish to set it's value based on a boolean value that Im setting in connectedCallBAck but it picks the global variable value. I cannot understand why this is happening

<template>
    <lightning-tabset active-tab-value = {activetabVal}>
        <lightning-tab value = 'one' label="Item One">
            One Content !
        </lightning-tab>
        <lightning-tab label="Item Two" value = 'two' title="2nd tab extended title">
            Two Content !
        </lightning-tab>
        <lightning-tab label="Item Three" value = 'three'>
            Three Content !
        </lightning-tab>
    </lightning-tabset>
</template>
export default class TabsetBasic extends LightningElement {

    boolVal;   // this controls the active-tab-value behaviour

    connectedCallback(){
        this.cv();
    }
    cv (){
        this.boolVal = true;  // not controlling the active-tab-value behaviour
    }
      activetabVal=  (this.boolVal)? 'two': 'three';

}

the class level variable boolVal if I switch the boolean values between true and false the default tab functionality works, but if I set it in connectedCallBack and keep switching the boolean values it doesnt work, the activeTabValue is picking the global variable value. Why is this happening?

I have a lightning-tabset with three tabs, problem is the active-tab-value of the lightning tabset, I wish to set it's value based on a boolean value that Im setting in connectedCallback but it picks the global variable value. I cannot understand why this is happening

<template>
    <lightning-tabset active-tab-value = {activetabVal}>
        <lightning-tab value = 'one' label="Item One">
            One Content !
        </lightning-tab>
        <lightning-tab label="Item Two" value = 'two' title="2nd tab extended title">
            Two Content !
        </lightning-tab>
        <lightning-tab label="Item Three" value = 'three'>
            Three Content !
        </lightning-tab>
    </lightning-tabset>
</template>
export default class TabsetBasic extends LightningElement {

    boolVal;   // this controls the active-tab-value behaviour

    connectedCallback(){
        this.cv();
    }
    cv (){
        this.boolVal = true;  // not controlling the active-tab-value behaviour
    }
      activetabVal=  (this.boolVal)? 'two': 'three';

}

the class level variable boolVal if I switch the boolean values between true and false the default tab functionality works, but if I set it in connectedCallback and keep switching the boolean values it doesnt work, the activeTabVal is picking the global variable value. Why is this happening?

Source Link
Amax1
  • 121
  • 4
  • 16

lightning-tabset picking the incorrect variable to set active-tab-value

I have a lighting tabset with three tabs, problem is the active-tab-value of the lightning tabset, I wish to set it's value based on a boolean value that Im setting in connectedCallBAck but it picks the global variable value. I cannot understand why this is happening

Here is the code

<template>
    <lightning-tabset active-tab-value = {activetabVal}>
        <lightning-tab value = 'one' label="Item One">
            One Content !
        </lightning-tab>
        <lightning-tab label="Item Two" value = 'two' title="2nd tab extended title">
            Two Content !
        </lightning-tab>
        <lightning-tab label="Item Three" value = 'three'>
            Three Content !
        </lightning-tab>
    </lightning-tabset>
</template>

JS

export default class TabsetBasic extends LightningElement {

    boolVal;   // this controls the active-tab-value behaviour

    connectedCallback(){
        this.cv();
    }
    cv (){
        this.boolVal = true;  // not controlling the active-tab-value behaviour
    }
      activetabVal=  (this.boolVal)? 'two': 'three';

}

the class level variable boolVal if I switch the boolean values between true and false the default tab functionality works, but if I set it in connectedCallBack and keep switching the boolean values it doesnt work, the activeTabValue is picking the global variable value. Why is this happening?