In a parent component, I am using a wired service to get picklist values for a field.
I would then like to pass those picklist values into a child component via a parameter (@api property) of the child.
I don't want to use the wire service in the child because the child is init on click, and hidden before then. If the wire service only runs when the child is shown, then there is a delay in getting the picklist data. Also I feel it is good to have a dumber child component.
Unfortunately, although I can verify that the parent component is successfully getting the picklist data, the child component always receives an empty object.
Is there a reason why the picklist object wouldn't be passed into the child component?
class ParentComponent extends LightningComponent {
@wire(getObjectInfo, { objectApiName: MY_OBJECT.objectApiName })
myObjectInfo;
@wire(getPicklistValues, {
recordTypeId: '$myObjectInfo.data.defaultRecordTypeId',
fieldApiName: 'My_Object__c.My_Picklist_Field__c'
})
picklistOptions;
}
<div>
<template if:true={isModalOpen}>
<c-custom-modal
my-picklist-options={picklistOptions}>
</c-custom-modal>
</template>
</div>
class ChildComponent extends LightningComponent {
@api myPicklistOptions;
connectedCallback() {
// output is always empty object
console.log(JSON.parse(JSON.stringify(this.myPicklistOptions)));
}
}
Best Answer
You need to pass the return from the wire to a
@track
ed property and then use this property to the child component, so something like: