时间戳

首页 > 解决方案 > 带有 livewire 的复选框闪烁

html - 带有 livewire 的复选框闪烁

问题描述

我需要一种使用 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

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

标签： htmllaravel-livewire

解决方案

闪烁似乎是浏览器和 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

推荐阅读