1

I'm a beginner at lwc!

When you select an object from a combo box created by a parent component, you want to load the fields corresponding to the selected object into the combo box created by the child component.

I handed over the value of the combo box created by the parent component to my child, and I checked that the value of the parent combo box changes every time it changes.

However, I can't create a logic that gives the value of the parent combo box in the child component and brings the field corresponding to the value to the option of the child component.

I tried to code it for three days, but I couldn't Help me.

Thank you.

Here is Parent HTML combobox code!

<lightning-combobox
        id="pickList"
        name="progress"
        value={strAccountName}
        variant={variant}
        options={options}
        onchange={changeName}
        onclick={addContact}
        class="object-combobox-style"
>
</lightning-combobox>
    <div class="slds-m-top_x-medium slds-p-around_medium">
      <c-child-cmp object-value={strAccountName}></c-child-cmp>
    </div>

and Parent JS code here


import { LightningElement, wire } from "lwc";
import getAllObjects from "@salesforce/apex/BB_DataDownLoader.getAllObjects";

export default class ParentCmp extends LightningElement {
  accounts;
  value;
  strAccountName = "";
  selectedObject = "None";
  options = [];

  @wire(getAllObjects)
  wiGetObjects({ error, data }) {
    if (data) {
      let temp = [];
      for (let key in data) {
        temp.push({
          label: data[key].Label,
          value: data[key].DurableId,
        });
      }
      this.options = temp;
      console.log("ddddddd", this.options);
    } else if (error) {
      this.error = error;
    }
  }

  constructor() {
    super();

    this.template.addEventListener(
      "selectcontactevent",
      this.fetchselectedObject.bind(this.options)
    );
  }

  addContact() {
    const objChild = this.template.querySelector("c-child-cmp");
    objChild.addContactToList(this.strAccountName);
  }

  changeName(event) {
    this.strAccountName = event.target.value;
  }

  fetchselectedObject(event) {
    this.selectedObject = event.detail;
  }
}

and my Child combobox code here

<lightning-combobox
      name="progress"
      value={childValue}
      variant={variant}
      placeholder="필드 선택"
      options={lstContacts}
      onchange={handleChange}
      class={getValueName}
    >
    </lightning-combobox>

the last one is child Js code

import { LightningElement, api, wire } from "lwc";
import { getObjectInfos } from "lightning/uiObjectInfoApi";
import ACCOUNT_OBJECT from "@salesforce/schema/Account";
import OPPORTUNITY_OBJECT from "@salesforce/schema/Opportunity";

export default class childCmp extends LightningElement {
  objectApiNames = [
    ACCOUNT_OBJECT,
    OPPORTUNITY_OBJECT,];

  lstContacts = [];
  childValue;
  @api objectValue;

  @wire(getObjectInfos, { objectApiNames: "$objectApiNames" })
  propertyOrFunction({ data, error }) {
    let temp = [];
    let temp0 = [];
    let temp1 = []

    if (data) {
      const output0 = data.results[0].result.fields;
      const output1 = data.results[1].result.fields;

        for (let key in output0) {
        temp0.push({
              label: output0[key].label,
              childValue: output0[key].apiName,
            });
        }
        for (let key in output1) {
        temp1.push({
            label: output1[key].label,
            childValue: output1[key].apiName,
          });
        }
    temp.push(temp0, temp1);
    this.lstContacts = temp;
    }else if (error) {
      this.error = error;
    }
  }

  get lstContacts() {
      return [
        { label: temp[0].label, value: temp[0].childValue },
        { label: temp[1].label, value: temp[1].childValue },
      ];
    }

  handleChangeFeilds(event) {
    this[event.target.name] = event.target.value;
    
  }


 @api
  addContactToList(childValue) {
    this.lstContacts.push(childValue);
  }

  // // To fire the event after clicking on Contact name from the list.
  selectAccountFields(event) {
    const strSelectedContact = event.target.textContent;
    const evtSelectContact = new CustomEvent("selectcontactevent", {
      detail: strSelectedContact,
      bubbles: true,
    });
    this.dispatchEvent(evtSelectContact);
  }
}

 
2
  • Where are you calling your "selectAccountFields" method from?
    – BenBates
    Commented Sep 13, 2022 at 4:06
  • 1
    Unfortunately, it's not really possible to determine what you are trying to achieve, due to a number of issues with the code. I recommend making a series of small components that do just a tiny part of the functionality that you are trying to achieve, so you can determine which of them is not working. for example, try catching an event from a child and pulling the value out of event.detail. Then make another component that passes a value from parent to child and displays the value. Also, why are you binding this.options to your even handler? Maybe just use the onyoureventname syntax? Commented Sep 13, 2022 at 4:51

0

You must log in to answer this question.