1

I am currently creating a custom lead conversion page in LWC. I created a quick action using Aura and pass the leadRecordId to my LWC. I'am now getting the lead record details using APEX. But when I try to show the details in HTML LWC. The page does not load.

Here is my controller:

import { LightningElement, api, wire, track } from 'lwc';
import getLeadRecord from '@salesforce/apex/customLeadConversionController.getLeadRecord';
export default class CustomLeadConversion extends LightningElement {

@api recordId; 

@track varLeadRecord;

 @wire(getLeadRecord, { leadId : '$recordId' })
leadRecordDetails({ data, error }){
    if(data){
        this.varLeadRecord = data;
        console.log('this.varLeadRecord');
        console.log(this.varLeadRecord);
        console.log(this.varLeadRecord.Name);
        console.log(this.varLeadRecord.Id);
    }else if(error){

    }
  }          
}

Here is my html:

<template>
<header class="slds-modal__header">
    <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Convert Lead</h2>
    </header>
    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
        <lightning-accordion class="example-accordion">
            <lightning-accordion-section name="A" label="Account">                                                                            
            </lightning-accordion-section>                
    
            <lightning-accordion-section name="B" label="Contact">                  
               <p>Lead Record</p>  
               <!-- NOT WORKING-->
               <p>{varLeadRecord.FirstName}</p>  
               <!-- NOT WORKING-->
               <lightning-input type="text" name="firstname" label="FirstName" 
               value={}   
               class="formInput"></lightning-input>
            </lightning-accordion-section>
    
            <lightning-accordion-section name="C" label="Opportunity">                                             
            </lightning-accordion-section>

        </lightning-accordion>
    </div>
    <footer class="slds-modal__footer">
    <button class="slds-button slds-button_neutral" onclick={cancel}>Cancel</button>
    <button class="slds-button slds-button_brand" onclick={save}>
      Convert
    </button>
    </footer></template>
1
  • So you see it in JS (console.log), but not in HTML? – dzh Oct 5 '20 at 2:28
5

I think you need a default value for your tracked variable like @track varLeadRecord = {};. What happens lwc engine tries to reference undefined varLeadRecord on render and then gives up.

In future, enable Lightning Debug mode and "Pause on Exceptions" in Chrome to get some insight what's going on.

1
  • Thank you @dzh, this solved my problem. – Duan Oct 5 '20 at 3:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.