[SalesForce] LWC – How to open a modal for each element inside a forEach loop

I want to open a modal for each button inside an Accordion, I think I must set an unique ID for each modal, but I don't know how to do this

My code:

JS

    @track showModal = false;
    @track listaExecutivos = [];
    @api recordId;
    
    openModal(){
        this.showModal = true;
    }
    closeModal(){
        this.showModal = false;
    }
    
    async getListaExecutivos(){
        try{
            this.listaExecutivos = await getListaExecutivos();
            console.log(this.listaExecutivos);
        }catch (error){
            console.error(error);
        }
    }

connectedCallback(){
    this.getListaExecutivos();
}

HTML

<template>
    <lightning-card title="Carteirização KA" icon-name="standard:avatar" variant="base">
        <div slot="actions"></div>
        <div slot="footer"></div>
        <div class="slds-card__body_inner">
            <template for:each={listaExecutivos} for:item="executivo" for:index="index">
            <lightning-accordion allow-multiple-sections-open key={executivo.Id}>
                <lightning-accordion-section label={executivo.Name} name="-MS42bgWMGoUNNz8FtG9">
                    <div slot="actions">
                    </div>
                    <lightning-button key={executivo.Id} class="slds-theme_brand" variant="brand" label="Adicionar Assistente" onclick = {openModal}></lightning-button>
                </lightning-accordion-section>
            </lightning-accordion>
        </template>
        </div>
    </lightning-card>

    <!-- INICIO MODAL NOVO ASSISTENTE -->
<template if:true={showModal}>
    <div>
        <section role="dialog" tabindex="-1" aria-modal="true" class="slds-modal slds-fade-in-open slds-modal_small">
            <div class="slds-modal__container">
                <header class="slds-modal__header">
                    <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                        <lightning-icon icon-name="utility:close"
                            alternative-text="close"
                            variant="inverse"
                            size="small" ></lightning-icon>
                        <span class="slds-assistive-text">Close</span>
                    </button>
                    <div class="slds-text-heading_medium">Adicionar Assistente</div>
                </header>
                <div class="slds-modal__content slds-p-around_medium">
                    <lightning-input label="O assistente será adicionado para o seguinte executivo:" value = 'oi' disabled placeholder="d" type="text" variant="standard"></lightning-input>
                    <lightning-combobox label="Assistentes" options={previewOptions} placeholder="Select an Option" dropdown-alignment="left" variant="standard"></lightning-combobox>
                </div>
                <footer class="slds-modal__footer">
                    <lightning-button class="slds-theme_brand" variant="brand" label="Salvar"></lightning-button>
                    <lightning-button label="Cancelar" onclick={closeModal}></lightning-button>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </div>
</template>
    <!-- FIM MODAL NOVO ASSISTENTE -->
</template>```

Best Answer

In your template, use a data attribute to reference the Id of the executivo:

<lightning-button 
  data-key={executivo.Id} 
  class="slds-theme_brand" 
  variant="brand"
  label="Adicionar Assistente"
  onclick={openModal}>
</lightning-button>

Define a variable representing the currently-selected executive. Modify your openModal() function to set this variable's value based on the key of the target button:

@track atualExecutivo = {};

openModal(evento){
  this.atualExecutivo = this.listaExecutivos.find(e => 
    e.Id === evento.target.dataset.key
  );
  this.showModal = true;
}

Now, in your modal, you can do this:

<lightning-input 
  label="O assistente será adicionado para o seguinte executivo:" 
  value={atualExecutivo.Name}
  disabled 
  type="text" 
  variant="standard"
></lightning-input>

Note: you don't currently have any onchange event handler defined for your lightning-combobox in the modal, so you'll still need to implement something there. What that looks like depends on what you plan to do with those combobox values.

Another note: since you're considering the use of comboboxes inside modals, you may want to look at this thread.

Related Topic