单击 Livewire 按钮显示额外行

Question

Livewire 组件未在变量更改时显示

我有这个 Livewire 组件：

<?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' );
    }
}

组件的视图是这个：

    <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>

我只想在人们点击加号按钮时显示第二个 TR，但它不起作用。如果我让 TR 可见，它会显示正确的信息。我不确定是否应该添加一些代码以在点击后强制渲染。

我也知道内容应该包裹在一个元素中，但我不知道如何只用一个 table 行来做到这一点，因为我想在下面显示待定区域。

Answer 1

你试过在你的组件中使用 alpine 吗？不需要 $showMore 属性在线 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>

Answer 2

我已经测试了 blade 版本的解决方案。

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

包装意味着将 blade 视图中的所有内容都放入 <div></div> 中，就像 <div><tr><td class..> ..</div> 一样。就像在 Vuejs2.

谢谢。

单击 Livewire 按钮显示额外行

Show extra row on livewire button click

components

laravel

laravel-livewire