0

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?

1 Answer 1

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';
} 
2
  • I have a question. What if there is a renderedCallback that keeps resetting the boolVal value whenever its value changes as it is reactive, how do we handle this scenario then?
    – Amax1
    Jul 23, 2023 at 7:12
  • Ideally that should also work, do you see it not behave as expected? If not then share an example
    – Raul
    Jul 23, 2023 at 10:31

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .