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

Question

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

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 activeTabVal is picking the global variable value. Why is this happening?

Answer 1

The problem here is because you assigned the value to activetabVal, its value is evaluate at time of declaration based on initial value of boolVal.

From connected callback, when you change boolVal value, it does not re-evaluates activetabVal.

For this to work, you could change the activetabVal property to a getter.

get activetabVal() {
    return (this.boolVal) ? 'two': 'three';
}