LWC - How to get label name of buttons

Question

I have been trying to open a modal window onclick of a button menu. The modal will be child of the parent lwc and will be hidden. Its passed with some values

<lightning-button-menu class="slds-m-left_xx-small" variant="container" alternative-text="Show menu" icon-name="utility:settings" onselect={handleButtonselect}>
<lightning-menu-item value={topNewsItem.props.header} label="Email" prefix-icon-name="utility:email"></lightning-menu-item>
<lightning-menu-item value="Post" label="post" prefix-icon-name="utility:share_post"></lightning-menu-item>
<lightning-menu-item value="Task" label="task" prefix-icon-name="utility:task"></lightning-menu-item>

@track openEmail;

handleButtonselect(event) {
    event.preventDefault();
    event.stopPropagation();
    console.log('here >>'+event.detail.value);
    console.log('label >>'+event.detail);
    var menuValue = 'Email';
    switch(menuValue) {
        case "Email": this.openEmail = true; break;
        case "Post": this.post = true; break;
    }

}

In handleButtonselect how can i know whether email event has been selected or post or anything else. I am trying to create a custom component to email or post, when clicked. Is there a better way ?

Answer 1

Why not use for:each and declare the options as List of Objects in JS?

and then on handleButtonselect get the value and do an array search to get your label?

Html:

<template>
    <h1>Hello World</h1>
    <lightning-button-menu class="slds-m-left_xx-small" variant="container" alternative-text="Show menu"
        icon-name="utility:settings" onselect={handleButtonselect}>

        <template for:each={optionsList} for:item="option">
            <lightning-menu-item key={option.value} value={option.value} label={option.label} prefix-icon-name={option.iconName}></lightning-menu-item>


        </template>
    </lightning-button-menu>
</template>

JS:

import { LightningElement , api } from 'lwc';

export default class SelectList extends LightningElement {

    @api optionsList = [{value : 'email' , label :'emailLabel' ,iconName : 'utility:email'} , {value : 'Post' , label :'postLabel' , iconName : 'utility:share_post'}];

    handleButtonselect (event){


        console.log(event.detail.value);

        let selectedValue = event.detail.value;
        let selectedObject  = this.optionsList.find(function(element){
                    return element.value === selectedValue;
        });

        console.log('selected Label ->' + selectedObject.label);

    }
}

Answer 2

@Pranay , thanks. This is ok. But i need to have a custom value in lightning menuItems, so that on select i can get that custom value. The above is fine when we have static value.

<template for:each={topNewsServer} for:item="topNewsItem">
     <li key={topNewsItem.key} class="slds-item">
     <lightning-tile href="#" type="media">
     <c-account-title accounts-list={accounts} entity-id={topNewsItem.timeline} title-color={accountTitleColor}></c-account-title>
     <lightning-button-menu class="slds-m-xxx-small" variant="container" alternative-text="Show menu" icon-name="utility:settings" onselect={handleButtonselect}>
             <lightning-menu-item value={topNewsItem.props.url} label="Email" prefix-icon-name="utility:email"></lightning-menu-item>
             <lightning-menu-item value="Post" label="post" prefix-icon-name="utility:share_post"></lightning-menu-item>
             <lightning-menu-item value="Task" label="task" prefix-icon-name="utility:task"></lightning-menu-item>
     </lightning-button-menu>
     <p class="slds-truncate" title="">
         <span>
         <!-- passing property to child-->
             <c-relative-date-time epoch-date={topNewsItem.props.epoch}></c-relative-date-time>
          </span> via <span>{topNewsItem.props.domain}</span>
     </p>
     </lightning-tile>
     </li>

I need the value to be different so that onclick i can get the dynamic value and pass to modal or to childcomponent. I need to understand what i clicked in this case, whether email button or post or task.