LWC - Get RecordId from @api property

Question

I am wanting to get the Record Id when a user selects a record. I store this in a @api propery. I would like this Id so I can use the wire service getRecord to retrieve some fields and then I can pre popluate them on the ui.

HTML

<template>
    <template if:true={displayParentOpp}> <!-- only show if user meets pre conditions --> 
        <lightning-record-edit-form object-api-name="Opportunity">
            <lightning-input-field id="parentOpp" required variant="Neutral" field-name="Parent_OpportunityId__c"
                value={parentOppSelected} onchange={handleParentOppSelectedChange}>
            </lightning-input-field>
        </lightning-record-edit-form>
    </template>
</template>

JS:

@api parentOppSelected;
parentOppId;

handleParentOppSelectedChange(event) {
    //how to get Parent Opp Id?
    this.parentOppSelected = event.detail.value;
}


@wire(getRecord, { recordId: '$parentOppId', fields: fields })
account({ error, data }) {
    if (data) {
    } else if (error) {
    }
}

Below is the console log when the parent opp is selected. I am unsure how to retrieve the record Id from here

Answer 1

@api means a property is read-only within your own component (violate this rule at your own risk). That said, you can assign the value to this.parentOppId directly, and the wire handler will take care of the rest for you.