api decorator undefined when using in js

Question

I am passing the productConfigId to apex and getting result as expected and also I am using this id in HTML and it is working expected but when I use it in goToSubjectCount it results undefined instead of the ID, please suggest.

export default class APTPS_Configure_Visit_Schedule_LWC extends NavigationMixin(LightningElement) {


    @api productConfigId;
    @api configRequestId;

    @track imageUrl = apptusLogo;
    @track proposalData;
    @track goToSubjectCount='/apex/APTPS_Configure_Subject_Counts?id=' + this.productConfigId + '&configRequestId=' + this.configRequestId + '';
    @track goToMapSupplyQuantity = '/apex/APTPS_Configure_Subject_Counts?id=' + this.productConfigId + '&configRequestId=' + this.configRequestId + '';


    @wire(proposalDetails, { productConfigId: '$productConfigId' })
    proposalDetail({data}) {
        if (data) {
            this.proposalData = data;
        }
    }
}

Answer 1

I assume the productConfigId value is set by a parent of your component. So the problem is that when you instantiate your goToSubjectCount variable, the productConfigId value is not arealdy set by its parent.

For your case, the only solution I see would be to overwrite the setter of the productConfigId variable. By overwriting the setter, you could set the new value of your goToSujbectCount variable every time the value is changed. The same applies to the configRequestId variable. Here's the code to implement this solution:

@track goToSubjectCount;

_productConfigId;
_configRequestId;

@api
get productConfigId(){
    return this._productConfigId;
}
set productConfigId(value){
    this._productConfigId = value;
    setGoToSubjectCount();
} 

@api
get configRequestId(){
    return this._configRequestId;
}
set configRequestId(value){
    this._configRequestId = value;
    this.setGoToSubjectCount();
}

setGoToSubjectCount(){
    this.goToSubjectCount ='/apex/APTPS_Configure_Subject_Counts?id=' + this._productConfigId + '&configRequestId=' + this._configRequestId + '';
}