3

I am having issues rendering anything on my button click using the aura:if notation. As far as i can tell it should work? But when i click the button nothing happens.

Component

<button class="slds-button slds-button--neutral newsbutton" style="float:right"  onclick="{!c.toggle}">Reply</button>

<aura:if istrue="{!v.showEditView}">
    <p>TEST</p>
    <div class="slds-form-element__control">
        <ui:inputRichText aura:id="bodyMsg"/> 
    </div>
</aura:if>

Controller

doInit : function(component, event, helper) {
    component.set("v.isError", false)
    component.set("v.showEditView", false);
    component.set("v.errorMsg", "");
    //helper.getPicklistValue(component);
    var action = component.get("c.getCase");
    action.setParams({
        caseId : component.get("v.caseId")
});

action.setCallback(this, function(a) {
    if (a.getState() === "SUCCESS") {
        component.set("v.record", a.getReturnValue());
    }
});

$A.enqueueAction(action);
},

toggle : function(component, event, helper) {
    //cmp.set("v.recordId", event.target.id);
    component.set("v.showEditView", true);
},
  • 1
    In addition to the case sensitive, I have had issues before where even if true the IF did not render. I had to literally access the value the IF was using prior to the IF component. i.e. <div class="slds-hide">{!v.showEditView}</div><aura:if isTrue="{!v.showEditView}"> without the div before the IF the IF did not render. adding the div solved it. – Eric Jan 16 '17 at 15:26
5

It's an case sensitive issue, it should have been isTrue="{!v.showEditView}". Look at the aura:if. Always remember everything in Lightning component is case sensitive.

| improve this answer | |

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.