You need to sign in to do that
Don't have an account?
Brenda Paiva 3
How to pass a list from the child component to the parent through an lightning event?
Hello, everyone.
I have a parent component, with a child component to simulate a multipicklist selection. I have to pass the list of selected values to the parent component, but it doesn't work. Does enyone know how to solve this?
Child component:
<aura:attribute name="UFList" type="List" default="[]"/>
<aura:attribute name="selectedUFList" type="List" default="[]"/>
<div class="slds-m-around_xx-small">
<lightning:dualListbox aura:id="selectUF"
name="UF"
sourceLabel="Disponíveis"
selectedLabel="Selecionados"
options="{!v.UFList }"
value="{!v.selectedUFList}"
onchange="{!c.handleUFChange}"/>
<lightning:button variant="brand" label="Salvar" onclick="{!c.getSelectedUF}" />
</div>
Child controller:
getSelectedUF : function(component, event, helper){
var selectedValues = component.get("v.selectedUFList");
var componentEvent = component.getEvent("MultiPicklitsEvt");
componentEvent.setParams({
"UFVar" : component.get("v.selectedValues"),
});
componentEvent.fire();
}
Event:
<aura:event type="COMPONENT" >
<aura:attribute name="UFVar" type="String" />
</aura:event>
Parent component:
<aura:handler name="MultiPicklitsEvt" event="c:MultiPicklitsEvt" action="{!c.handleMultiPicklitsEvt}"/>
Parent Controller:
handleMultiPicklitsEvt : function (component,event,helper) {
var item = component.get("v.item");
component.set("v.chosenUF", event.getParam("UFVar"));
console.log(UFVar)
item.UF__c = event.getParam("UFVar");
log.console(chosenSP)
component.set("v.item", item);
},
I have a parent component, with a child component to simulate a multipicklist selection. I have to pass the list of selected values to the parent component, but it doesn't work. Does enyone know how to solve this?
Child component:
<aura:attribute name="UFList" type="List" default="[]"/>
<aura:attribute name="selectedUFList" type="List" default="[]"/>
<div class="slds-m-around_xx-small">
<lightning:dualListbox aura:id="selectUF"
name="UF"
sourceLabel="Disponíveis"
selectedLabel="Selecionados"
options="{!v.UFList }"
value="{!v.selectedUFList}"
onchange="{!c.handleUFChange}"/>
<lightning:button variant="brand" label="Salvar" onclick="{!c.getSelectedUF}" />
</div>
Child controller:
getSelectedUF : function(component, event, helper){
var selectedValues = component.get("v.selectedUFList");
var componentEvent = component.getEvent("MultiPicklitsEvt");
componentEvent.setParams({
"UFVar" : component.get("v.selectedValues"),
});
componentEvent.fire();
}
Event:
<aura:event type="COMPONENT" >
<aura:attribute name="UFVar" type="String" />
</aura:event>
Parent component:
<aura:handler name="MultiPicklitsEvt" event="c:MultiPicklitsEvt" action="{!c.handleMultiPicklitsEvt}"/>
Parent Controller:
handleMultiPicklitsEvt : function (component,event,helper) {
var item = component.get("v.item");
component.set("v.chosenUF", event.getParam("UFVar"));
console.log(UFVar)
item.UF__c = event.getParam("UFVar");
log.console(chosenSP)
component.set("v.item", item);
},
Your child component should register the event. I cant see that in the child component markup. Below is the example:
In the event file, the attribute type of UFVar should be List instead of String.