You need to sign in to do that
Don't have an account?
Chuck H.
Nested Lightning component not updating when JS object (iteration/Array) changes
I'll preface by saying this is working in other locations, where it is not nested. I have a component (cmp A) nested in a lightning:accordionSection, the component contains a <aura:attribute name="oppContacts" type="Object[]"/> that is displayed in an aura:iteration. My Controller.js has the following code that allows users to 'clone' the js objects (on save, all objects are inserted in SFDC as Custom_Objects via apex):
The issue I'm having is that the iteration on the page does not update. I believe this is because of how it's nested, but not sure. Hoping to learn the best way to handle this...maybe rerender.js but again, not sure.
I do log the array after the clone, and it does grow. I can also debug in the cmp as {!v.oppContacts.length} and the length does increase by one with each button push. Button is setup as follows:
An odd behavior I noticed was that if I put two of the same "cmp A"'s on the page, clicking my 'doClone' button in one cmp would rerender the other as expected.
I don't want to add to confusion with a wall of code. I think I have the relevant bits. I pretty sure I'm close because this works on other pages, outside of being nested.
I'll lastly add that I'm a newer developer. Open to any input: general approach, specific, js, etc. Circling back for formatting asap.
cloneThis : function(component, event, helper){ console.log(event); var cloneObj = {}; cloneObj = Object.assign({}, event.getSource().get("v.name")); //cloneObj = event.getSource().get("v.name"); console.log(cloneObj.role); //test var optionsArr = component.get("v.oppContacts"); console.log(optionsArr); optionsArr.push(cloneObj); //set new clone ref priority to none...doesn't help //optionsArr[optionsArr.length-1].priority = 'NONE'; component.set("v.oppContacts", optionsArr); console.log(document.getElementById("cW").innerHTML); document.getElementById("cW").innerHTML = document.getElementById("cW").innerHTML; console.log('set html!!!'); //var bottomMarker = document.getElementById("bottomMarker"); //bottomMarker.scrollIntoView(); }
The issue I'm having is that the iteration on the page does not update. I believe this is because of how it's nested, but not sure. Hoping to learn the best way to handle this...maybe rerender.js but again, not sure.
I do log the array after the clone, and it does grow. I can also debug in the cmp as {!v.oppContacts.length} and the length does increase by one with each button push. Button is setup as follows:
<lightning:button name="{!contact}" aura:id="{!contact.name}" value="{!contact.name}" variant="brand" label="Clone" onclick="{!c.cloneThis}" />
An odd behavior I noticed was that if I put two of the same "cmp A"'s on the page, clicking my 'doClone' button in one cmp would rerender the other as expected.
I don't want to add to confusion with a wall of code. I think I have the relevant bits. I pretty sure I'm close because this works on other pages, outside of being nested.
I'll lastly add that I'm a newer developer. Open to any input: general approach, specific, js, etc. Circling back for formatting asap.
The change was to my lines 8-10 above, here's the new code:
Kudos goes here: https://salesforce.stackexchange.com/questions/108925/lightning-rerender-child-components-in-auraiterable-after-parent-attribute-ch
All Answers
The change was to my lines 8-10 above, here's the new code:
Kudos goes here: https://salesforce.stackexchange.com/questions/108925/lightning-rerender-child-components-in-auraiterable-after-parent-attribute-ch