You need to sign in to do that
Don't have an account?
Jugbeer Bhola
Parent component with multiple children of same component
I have a parent component that has several child checkbox components on the page. When a primary checkbox is unchecked, I would like a minor checkbox set to be unchecked. Not all the other checkbox sets. Just one.
I cannot seem to get a handle on a single specific entity since they all have the same name.
let thisCheckbox = this.template.querySelectorAll('c-ampafb-multi-select-checkbox');
I get the following back from the above statement. Do not know what to do with it.
"[{\"$$ShadowTokenKey$$\":\"c-ampafbHouseholdMoreAbout_ampafbHouseholdMoreAbout\",\"$$ShadowedNodeKey$$\":23,\"$$HostElementKey$$\":15},{\"$$ShadowTokenKey$$\":\"c-ampafbHouseholdMoreAbout_ampafbHouseholdMoreAbout\",\"$$ShadowedNodeKey$$\":24,\"$$HostElementKey$$\":15},{\"$$ShadowTokenKey$$\":\"c-ampafbHouseholdMoreAbout_ampafbHouseholdMoreAbout\",\"$$ShadowedNodeKey$$\":25,\"$$HostElementKey$$\":15},{\"$$ShadowTokenKey$$\":\"c-ampafbHouseholdMoreAbout_ampafbHouseholdMoreAbout\",\"$$ShadowedNodeKey$$\":26,\"$$HostElementKey$$\":15},{\"$$ShadowTokenKey$$\":\"c-ampafbHouseholdMoreAbout_ampafbHouseholdMoreAbout\",\"$$ShadowedNodeKey$$\":27,\"$$HostElementKey$$\":15},{\"$$ShadowTokenKey$$\":\"c-ampafbHouseholdMoreAbout_ampafbHouseholdMoreAbout\",\"$$ShadowedNodeKey$$\":28,\"$$HostElementKey$$\":15},{\"$$ShadowTokenKey$$\":\"c-ampafbHouseholdMoreAbout_ampafbHouseholdMoreAbout\",\"$$ShadowedNodeKey$$\":29,\"$$HostElementKey$$\":15}]"
Each child component is assigned a unique dataId so I thought I could call a child method like this and pass the dataID.
PARENT COMPONENT
this.template.querySelector('c-ampafb-multi-select-checkbox')
.clearAllCheckboxes(this.c4_childDataId);
CHILD COMPONENT
@api clearAllCheckboxes(dataId) {
let checkBoxes = this.template.querySelectorAll('[data-id=' + dataId + ']');
**** checkboxes is null.
}
Could someone please offer some suggestions?
Thanks
I cannot seem to get a handle on a single specific entity since they all have the same name.
let thisCheckbox = this.template.querySelectorAll('c-ampafb-multi-select-checkbox');
I get the following back from the above statement. Do not know what to do with it.
"[{\"$$ShadowTokenKey$$\":\"c-ampafbHouseholdMoreAbout_ampafbHouseholdMoreAbout\",\"$$ShadowedNodeKey$$\":23,\"$$HostElementKey$$\":15},{\"$$ShadowTokenKey$$\":\"c-ampafbHouseholdMoreAbout_ampafbHouseholdMoreAbout\",\"$$ShadowedNodeKey$$\":24,\"$$HostElementKey$$\":15},{\"$$ShadowTokenKey$$\":\"c-ampafbHouseholdMoreAbout_ampafbHouseholdMoreAbout\",\"$$ShadowedNodeKey$$\":25,\"$$HostElementKey$$\":15},{\"$$ShadowTokenKey$$\":\"c-ampafbHouseholdMoreAbout_ampafbHouseholdMoreAbout\",\"$$ShadowedNodeKey$$\":26,\"$$HostElementKey$$\":15},{\"$$ShadowTokenKey$$\":\"c-ampafbHouseholdMoreAbout_ampafbHouseholdMoreAbout\",\"$$ShadowedNodeKey$$\":27,\"$$HostElementKey$$\":15},{\"$$ShadowTokenKey$$\":\"c-ampafbHouseholdMoreAbout_ampafbHouseholdMoreAbout\",\"$$ShadowedNodeKey$$\":28,\"$$HostElementKey$$\":15},{\"$$ShadowTokenKey$$\":\"c-ampafbHouseholdMoreAbout_ampafbHouseholdMoreAbout\",\"$$ShadowedNodeKey$$\":29,\"$$HostElementKey$$\":15}]"
Each child component is assigned a unique dataId so I thought I could call a child method like this and pass the dataID.
PARENT COMPONENT
this.template.querySelector('c-ampafb-multi-select-checkbox')
.clearAllCheckboxes(this.c4_childDataId);
CHILD COMPONENT
@api clearAllCheckboxes(dataId) {
let checkBoxes = this.template.querySelectorAll('[data-id=' + dataId + ']');
**** checkboxes is null.
}
Could someone please offer some suggestions?
Thanks
Find all the child components with the same name. That returns an array of Proxies. A unique variable on the child component had to be found. The proxy had the variable called inDataId. When found, the specific child component method was called on the child.
****PARENT COMPONENT METHOD
clearChildCheckboxes(dataId) {
const childComponent = this.template.querySelectorAll('c-ampafb-multi-select-checkbox');
for (var i = 0; i < childComponent.length; i++) {
let target = childComponent[i].inDataId;
if (target == dataId) {
childComponent[i].clearAllCheckboxes(dataId);
break;
}
}
}
The establishment of the specific proxy must allow the child component to recognize its uniqueness.
When the child method was called it still needed to find the specific checkboxes on the component with the querySelectorAll()
****CHILD COMPONENT METHOD
@api clearAllCheckboxes(dataId) {
let checkBoxes = this.template.querySelectorAll('[data-id=' + dataId + ']');
for (let i = 0; i < checkBoxes.length; i++) {
checkBoxes[i].checked = false;
checkBoxes[i].disabled = false;
}
}
There may be a better way but no one answered the question. If someone has a more elegant way please post.
Thanks