带电的复选框闪烁

Question

我需要一种使用 livewire 隐藏和显示 table 中的列的方法，因此我创建了一个变量来保存“true”或“false”值。这就是我 blade

中的内容

<input  value="showRate" type="checkbox" wire:click="$set('showRate', {{ $showRate ? 'false' : 'true' }})" >Rate

并且在 mount 中我简单地将值初始化为 true

public function mount(){
        $this->showRate = true;
    }

在浏览器中，一切都按预期工作，但切换时的复选框出现了几次 mili-seconds 然后消失了。这是我 table 观点的一部分。

              @if($showRate)
                     <th wire:click="sortBy('SFM_rate')" style="cursor: pointer;" class="px-4 py-2">SFM Rate @include('partials.sort-icon',['field'=>'SFM_rate'])</th>
              @endif

我很确定还有另一种方法可以提高效率，但这是我想到的第一个解决方案。如果您有任何建议，请随时教我更好的解决方案。

Answer 1

闪烁似乎是浏览器和 Livewire 之间状态所有权冲突的结果。

如果您将复选框更改为以下内容，闪烁将停止：

<input
    wire:click="$set('showRate', {{ $showRate ? 'false' : 'true' }})"
    type="checkbox"
    value="showRate"
    @if ($showRate) checked="checked" @endif>

    Rate

或者 Livewire 提供了一个助手来切换 boolean 属性的值：

<input wire:click="$toggle('showRate')"
    type="checkbox"
    value="showRate" />

    Rate

带电的复选框闪烁

Checkbox flicker with livewire

html

laravel-livewire