1

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)));
  }
}
3

You need to pass the return from the wire to a @tracked property and then use this property to the child component, so something like:

@track picklistOptions;
@wire(getPicklistValues, {
    recordTypeId: '$myObjectInfo.data.defaultRecordTypeId',
    fieldApiName: 'My_Object__c.My_Picklist_Field__c'
  })
  wiredOptions({ error, data }) {
    if (data) {
        this.picklistOptions = data;
    }
}
1

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.