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);
}
}
event.detail
. Then make another component that passes a value from parent to child and displays the value. Also, why are you bindingthis.options
to your even handler? Maybe just use theonyoureventname
syntax?