How do you hande a confirmation modal located in another component?

#1

Hello,

I’m really new to Livewire and I would like to understand how do you handle a confirmation modal ?

Let’s say I have a list of user like in the screen below:

https://gyazo.com/faa5886dc92da6af94f9130f8a372ba3.

How can I call the remove modal which is located in another component ? I put the modal in another livewire component to avoid creating its HTML for each of my rows.

<!-- Modal component -->
<div>
    <div id="modal-remove" data-uk-modal>
        <div class="uk-modal-dialog uk-modal-body">
            <button class="uk-modal-close-default" type="button" data-uk-close></button>
            <h2 class="uk-modal-title">Confirmation modal</h2>
            <p>Are you sure you want to delete this item ?</p>
            <p class="uk-text-right">
                <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
                <button class="uk-button uk-button-danger" type="button">Remove</button>
            </p>
        </div>
    </div>
</div>

<!-- Button component -->
<div>
    <button
        class="uk-button uk-button-primary uk-button-small"
        wire:click="updateEntityRoute('{{ $model->id }}')"
        title="Edit this entity"
    >
        <i class="fas fa-pencil-alt"></i>
    </button>
    <button
        class="uk-button uk-button-danger uk-button-small"
        title="Delete this entity"
        data-uk-toggle="target: #modal-remove"
    >
        <i class="fas fa-trash"></i>
    </button>
</div>

I’m using UIKit for the front-end, Laravel 7.X and Livewire latest version.

Thank you in advance for you answers