LWC - URL parameter value is shows Undefined

Question

Reading the url param through a lightning web component(Using LWC Components in Visualforce Pages).

URL: https://sampleDEV/apex/Enrollment?enrollmentId=a082w000000YUQEfd

Visualforce Page:

 <apex:page >
<apex:includeLightning />
<div id="lightning" /> 
<script>

var enrollId = "{!$CurrentPage.parameters.enrollmentId}";
$Lightning.use("c:EnrollmentVf", function() {  //Aura app name
    $Lightning.createComponent("c:enrollment_5",
                               {EnrId : enrollId},
                               "lightning",
                               function(cmp) {
                                   // console.log("button was created" + enrollId);
                                   // do some stuff
                               }
                              );
});
</script>

Aura app:

<aura:application  access="GLOBAL" extends="ltng:outApp" >  
<aura:dependency resource="enrollment_5"/>
</aura:application>

JS

export default class Enrollment_5 extends LightningElement {
 @api EnrId;
// @api recordId = "a082w000000YUQEfd";
 @api recordId = this.EnrId;

 @wire(getParentdetails, { enrollmentName: "$recordId" })
 getContacts(response) {
  console.log("URL Param  ==>" + this.EnrId);
}
 }

When i print this this.EnrId value is getting URL Param ==>undefined

Answer 1

When the class is first defined, EnrId is undefined.

This is when you are assigning it to recordId - which fires getParentDetails.

Which means, that your console.log will print out undefined.

Your options to fix include: pass recordId in directly:

 $Lightning.createComponent("c:enrollment_5",
                           {recordId : enrollId},
                           "lightning",

Or use a setter function so that when EnrId is set, it sets recordId (bad because it has a side effect).

_EnrId;
@api
set EnrId(value){
    this._EnrId = value
    this.recordId = value;
}

Or perhaps assign EnrId to recordId in the connectedCallback() //I am unsure about this one, as I don't know when exactly this gets called.

   connectedCallback(){
       this.recordId = this.EnrId;
   }