Lightning aura If is not working

Question

I am trying to render 2 text according to change in button Menu select. I am able to get the value of the selected menu but the auro:if condition is not getting reRender properly. My code below

<aura:component >    
<aura:attribute name="selectedVal" type="boolean" default="false"/>
<lightning:buttonMenu value="{!selectedVal}" class="slds-dropdown-trigger " alternativeText="Settings" onselect="{!c.handleMenuSelect}">
    <lightning:menuItem label="Panal 1" value="true" />
    <lightning:menuItem label="Panal 2" value="false"/>
</lightning:buttonMenu>
<br/><br/><br/><br/><br/><br/><br/>


{!v.selectedVal}<br/>
{!v.selectedVal == true}<br/>
{!v.selectedVal == false}
    <aura:If istrue="{!v.selectedVal}">
        <p aura:id="p1" >p1</p>            
    </aura:If >

    <aura:if istrue="{!!v.selectedVal}">
            testing
    </aura:if>
</aura:component>

Controller

({
handleMenuSelect : function(component, event, helper) {
    var selectedMenuItemValue = event.getParam("value");
    var selected = selectedMenuItemValue;
     console.log(selectedMenuItemValue);
    component.set("v.selectedVal", selectedMenuItemValue);        
} })

My text is not getting renderd when the selected value is changed. i used if and else auro:set condition even if it is not working. Do anyone have any idea.

Above is the screenshot of what i am getting after selecting panel 1 from button option.

Answer 1

This is actually because "true" and "false" are rendering as String values, even though your attribute is a Boolean. I'm not sure why Lightning allows this, but the easiest fix is to use the true and false global providers:

    <lightning:menuItem label="Panal 1" value="{!true}" />
    <lightning:menuItem label="Panal 2" value="{!false}"/>

Or, compare as strings:

{!v.selectedVal}<br/>
{!v.selectedVal == 'true'}<br/>
{!v.selectedVal == 'false'}

Also, please be aware that Lightning is case sensitive, and may have undesirable side effects if you ignore it. aura:if won't work if you use istrue, but will work if you use isTrue. Mind your capitalization.

<!-- does not render -->
<aura:if istrue="{!!v.selectedVal}">
    testing
</aura:if>
<!-- works just fine -->
<aura:if isTrue="{!!v.selectedVal}">
    testing
</aura:if>

Answer 2

The bug in your code is at lightning:buttonmenu value="{!selectedVal}" ,you must append with using value provider v ( This value provider enables you to access the value of a component’s attribute in the component’s markup) eg:

value="{!v.selectedVal}" refer this for more details Value Providers

and Lightning is case sensitive use isTrue not istrue

<aura:if isTrue="{!v.selectedVal}">
    <p aura:id="p1" >p1</p>            
</aura:if >

<aura:if isTrue="{!!v.selectedVal}">
        testing
</aura:if>
<lightning:buttonMenu value="{!v.selectedVal}" class="slds-dropdown-trigger " alternativeText="Settings" onselect="{!c.handleMenuSelect}">