Show extra row on livewire button click

Question

Livewire component not showing on change of variable

I have this Livewire component:

<?php
    
namespace Modules\Contracts\Http\Livewire\Settlements;
    
use Carbon\Carbon;
use Livewire\Component;
use Modules\Contracts\Entities\Settlement;
    
class ReportBasicRow extends Component {
    public Settlement $settlement;
    public bool       $show_more  = false;
    
    /**
     * Monta el componente
     *
     * @param Settlement $settlement
     */
    public function mount( Settlement $settlement )
    {
        $this->settlement = $settlement;
    }
    
    /**
     * Cambia el estado de la variable $show_more
     */
    public function toggleShowMore()
    {
        $this->show_more = !$this->show_more;
    }
    
    /**
     * Muestra el componente
     *
     * @return \Illuminate\Contracts\View\View
     */
    public function render()
    {
        return view( 'contracts::livewire.settlements.reports.basic-row' );
    }
}

The view of the component is this one:

    <tr>
        <td class="text-center align-middle">{{ $settlement->contract->getNumber() }}</td>
        <td class="text-center align-middle" data-toggle="tooltip" data-placement="top" title="@if( $settlement->is_completed ) {{ __( 'contracts::settlements.completed' ) }} @else {{ __( 'contracts::settlements.pending' ) }} @endif">
            <span class="fa-stack">
                @if( $settlement->is_completed )
                    <i class="fas fa-check-circle fa-2x text-green"></i>
                @else
                    <i class="fas fa-circle text-secondary fa-stack-2x"></i>
                    <i class="fas fa-spinner text-white fa-spin"></i>
                @endif
            </span>
        </td>
        <td class="text-center align-middle">
            @if ( $settlement->is_completed  )
                {{ $settlement->created_at->diffInHours( $settlement->updated_at ) }} {{ __( 'hours' ) }}
            @else
                {{ $settlement->created_at->diffInHours( now() ) }} {{ __( 'hours' ) }}
            @endif
        </td>
        <td class="align-middle">
            <button type="button" wire:click="toggleShowMore" class="btn btn-link text-info">
                @if( $show_more == false )
                    <i class="far fa-plus-square"></i>
                @else
                    <i class="far fa-minus-square"></i>
                @endif
            </button>
        </td>
    </tr>
    <tr class="@if( $show_more == false ) d-none @endif">
        <td class="" colspan="4">
            <ul class="list-group list-group-flush">
                @foreach( $settlement->getPending() as $pending_dependency )
                    <li class="list-group-item">{{ $pending_dependency->name }}</li>
                @endforeach
                @if( $settlement->supervisor_at == null )
                    <li class="list-group-item">{{ ucfirst( __( 'contracts::contracts.supervisor' ) ) }}</li>
                @endif
            </ul>
        </td>
    </tr>

I want to show the second TR only when people clicks on the plus button, but it is not working. If I leave visible the TR it is showing the correct information. I'm not sure if I should add some code to force rendering after click.

I also know that content should be wrapped in a single element, but I don't know how to do this with only one table row, as I want to show the pending areas below.

Answer 1

I've tested blade version of solution.

@if( $show_more )
<tr>
    <td class="" colspan="4">
        <ul class="list-group list-group-flush">
            more..
        </ul>
    </td>
</tr>
@endif

Wrapping means to put everything inside blade view into <div></div> like <div><tr><td class..> ..</div>. Just as in Vuejs2.

Thanks.

Answer 2

Have you tried using alpine in your component? No need for a $showMore property on the livewire class

<tbody x-data="{showMore: false}">
    <tr>
        ....
        <td class="align-middle">
            <button type="button" x-on:click="showMore = !showMore" class="btn btn-link text-info">
                <i class="far" x-bind:class="{'fa-plus-square': !showMore, 'fa-minus-square': showMore}"></i>
            </button>
        </td>
    </tr>
    <tr x-show="showMore">
        ...
    </tr>
</tbody>