0

I am trying to create a load more button that when clicked changes how many iterations are in an Aura:iteration. Right now the End attribute on that iteration is 10, and we would like it to change by increments of 5 whenever the load more button is pressed. Here is my code so far:

    cardsLoaded: function(component, event, helper){
   component.getElementByTagName("aura:iteration").setAttribute("end", end +5);
},

Button:

<lightning:button label="Load More" title="Neutral action" onclick="{! c.cardsLoaded}"/>
1

You can't use document.getElementByTagName, because components are "virtual" elements, not real elements (LWC does expose them like this, but that's a different story). Here's one possible implementation, by setting an attribute, self-contained to make it easier to understand:

<aura:application extends="force:slds">
    <aura:attribute name="end" default="5" type="Integer" />
    <aura:attribute name="values" default="[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]" type="List" />
    <lightning:button onclick="{!c.add5}" label="+5" />
    <aura:iteration items="{!v.values}" end="{!v.end}" var="item">
        <div>
            {!item}
        </div>
    </aura:iteration>
</aura:application>

({
    add5: function(component, event, helper) {
        component.set("v.end", component.get("v.end") + 5);
    }
})

You can also use component.find:

<aura:application extends="force:slds">
    <aura:attribute name="values" default="[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]" type="List" />
    <lightning:button onclick="{!c.add5}" label="+5" />
    <aura:iteration aura:id="list" items="{!v.values}" end="5" var="item">
        <div>
            {!item}
        </div>
    </aura:iteration>
</aura:application>

({
    add5: function(component, event, helper) {
        var list = component.find("list");
        list.set("v.end", list.get("v.end") + 5);
    }
})
1
  • Thanks this worked wonderfully! – Trace Sep 20 '19 at 18:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.