How to show a livewire component on click?

Question

I have a livewire component that I want to load when clicking a div, and hide it when I click again. How can I do this? I tried this solution but without results. This is where I want to click.

<div wire:click="$set('show', true)" id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">                        
          <p>
            Unasigned tickets.
          </p>
      
          {{-- Table --}}
          <livewire:show-gestiones :gestiones="$gestiones" :cortes="$cortes" :estado=5 :show="$show"/>
      </div>
</div>

score 2 · Accepted Answer · answered Jul 27 '22 at 21:14

If you don't need any particular logic in your show-gestiones component regarding $show, if all you need is to hide it from the browser, you have two options - do it with Alpine (which is client-side only), or do it with Livewire (which will do a network request first).

Here's approach one; Alpine

Here we use x-data, x-on:click and x-show to toggle the state. Simple JavaScript handlers does this all in the frontned - no need with requests to the server to do this. This also means it will created on first render, and always be there.

<div x-data="{ show: false }"
    x-on:click="show = !show"
    id="collapseOne" 
    class="panel-collapse collapse" 
    role="tabpanel"
    aria-labelledby="headingOne"
>
    <div class="panel-body" x-show="show">
        <p>
            Unasigned tickets.
        </p>

        {{-- Table --}}
        
        <livewire:show-gestiones :gestiones="$gestiones" :cortes="$cortes" :estado=5 />
    </div>
</div>

Approach 2: Livewire

Here we can use the magic method $toggle from Livewire to toggle a boolean on or off. You can then wrap your component in an @if condition to that variable. This will also remove the HTML from that Livewire component entirely from the DOM, but it also means that you have to do a roundtrip to the server to do it. This means it will be destroyed when the user hides it, and it will be re-created and re-mounted when its shown.

<div wire:click="$toggle('show')" 
    id="collapseOne" 
    class="panel-collapse collapse" 
    role="tabpanel"
    aria-labelledby="headingOne"
>
    <div class="panel-body">
        <p>
            Unasigned tickets.
        </p>

        {{-- Table --}}
        @if ($show)
            <livewire:show-gestiones :gestiones="$gestiones" :cortes="$cortes" :estado=5  />
        @endif
    </div>
</div>

How to show a livewire component on click?

1 Answers1