带有 livewire 的复选框闪烁答案

【问题标题】：Checkbox flicker with livewire带有 livewire 的复选框闪烁
【发布时间】：2021-07-14 18:24:06
【问题描述】：

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

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

在 mount 中，我只是将值初始化为 true

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

在浏览器中，一切都按预期工作，但切换时复选框会出现几毫秒然后消失。这是我的表格视图的一部分。

              @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

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

【问题讨论】：

标签： html laravel-livewire

【解决方案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

【讨论】：