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?