wire:click not working in if statement using laravel livewire

Question

Hello I am currently working on a popover for my website and i want it to open when i press on a phone number. When pressing on the phonenumber i call a function in my livewire component called "startCall" which sets the value $calling to true through wire:click this is working perfectly fine and the pop up opens. And i want the pop up to close when i press the button "Nicht erreicht" through another function which is called "endCall" which does exaclty the opposite of "startCall" also through wire:click. The Problem is when pressing the button the function is not getting called at all. Is there something i am understanding wrong?

I tried putting using calling $set(calling , true) instead of calling the function throught wire:click but that didn't work out too.

this is my PersonContact.php which manupilates the boolean $calling:

public $enter_add;
public $contact_detail;
public $counter;
public $contact;
public $phone_counter = 1;
public $email_counter = 1;
public $name;
public $lastname;
public $salutation;
public $position;
public $emails = [];
public $phone_numbers = [];
public $showEditComponent = false;
public $contact_id;
public $call;
public $lead_id = 11;
public $job_id = 11;
public $calling = false;

public function startCall()
{
    $this->calling = true;
}

public function endCall(){
    $this->calling = false;
}

public function openEditContactDetailModal()
{
    $this->showEditComponent = true;
}

public function closeEditContactDetailModal()
{
    $this->showEditComponent = false;
}


public function render()
{
    $leadController = new LeadController();
    $this->lead_details_with_contacts = $leadController->getLeadDetailsWithContactsByLeadIdAndJobId($this->job_id, $this->lead_id);
    $this->lead_detail_emails_numbers = $this->lead_details_with_contacts['contacts'];

    return view('livewire.CA.OLV.LEADDETAILS.person-contact');
}

and this is the blade which gets called by it:

`

<div>
    <div>
        @foreach($lead_detail_emails_numbers as $contact)
            @php($contact_id = $contact['id'])
            <div class="d-flex flex-row">
                <div class="text-primary">
                    <span class="h-6 ">{{$contact['name']}} {{$contact['lastname']}}</span>
                    <p style=" font-size: 14px">{{$contact['position']}}</p>
                </div>
                <div class="p-2" style="margin-left: 5px; margin-top: 3px">
                   <span class="translate-middle badge  text-secondary">
                         <a data-bs-toggle="modal" data-bs-target="#editView{{$contact_id}}">
                <img src="{{asset(config('app.EDIT_SVG'))}}"/>
                    </a>
                   </span>
                </div>
            </div>
            @foreach($contact['emails'] as $email)
                <a class="btn btn-secondary" style="font-size: 10px">{{$email['email']}}
                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-dark"
                          style="height: 18px; padding-top: 5px">
                     {{$email['count']}}
             </span>
                </a>
                <br/>
            @endforeach
            @foreach($contact['phone_numbers'] as $numbers)
                <button type="button" class="btn btn-secondary"
                        style="font-size: 10px" wire:click="startCall">{{$numbers['number']}}
                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-dark"
                          style="height: 18px; padding-top: 5px">
                     {{$numbers['count']}}
             </span>
                </button>
                <br/>
            @endforeach
            <div class="modal fade" id="editView{{$contact_id}}" tabindex="-1" role="dialog"
                 aria-labelledby="exampleModalLabel"
                 aria-hidden="true">
                <livewire:edit-contact-detail :contact_id="$contact_id"/>
            </div>
            @if($calling)
                <div>
                    <div style="z-index:1000;position: absolute;top: 0;left:20%;width: 1100px"
                         class="alert alert-dismissible" role="alert">
                        <div class="bg-dark p-3 pb-1 border border-radius-xl">
                            <h6 class="text-center text-white">Du hast 3.15 mit Herr {{$contact['name']}}
                                telefoniert</h6>
                            <div class="row mt-2">
                                <div class="col-8">
                            <textarea placeholder="Protokoll hier verfassen..." class="border-radius-lg"
                                      style="width: 100%; height: 100px;"></textarea>
                                </div>
                                <div class="col-4">
                                    <button class="btn btn-secondary"
                                            style="font-size: 11px" wire:click="endCall" data-bs-dismiss="alert"
                                            aria-label="Close">Nicht erreicht
                                    </button>
                                    <button class="btn btn-primary" style="font-size: 11px">Telefonat beendet</button>
                                    <button class="btn btn-secondary" style="font-size: 11px">Nicht erreicht und
                                        weiter
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        @endforeach
    </div>
    <div>
        <a data-bs-toggle="modal" data-bs-target="#addView">
            <img src="{{asset(config('app.ADD_SVG'))}}"/>
        </a>
    </div>
    <div class="modal fade" id="addView" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div>
            <livewire:add-contact-detail :lead_detail_emails_numbers="$lead_detail_emails_numbers"/>
        </div>
    </div>
</div>

pop up open but not able to close

Before the pop up

Answer 1

wire:click is what Livewire finds to bind event handlers to. Under the hood Livewire binds a element.addEventListener('click') to it (as described in the docs).

It is not quite described in the docs how or when these event handlers are refreshed. I have multiple projects where variables are looped and there the handlers have always worked, even when new items were added. What you can try as a workaround is instead of adding it when $calling, instead just show/hide the div:

<div style="@if(! $calling) display: none; @endif">

Then the handler should be bound on page load and the style change shouldn't affect it.