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.