Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

romatexdev's avatar

Incomprehensible behavior of checkboxes in Livewire

The checkboxes of the selected checkboxes are displayed correctly for a fraction of a second when the page is loaded, but they disappear at the end of rendering. If you delete wire:model, the checkboxes are always displayed correctly as expected. Help me understand what is the reason for this behavior?

My Livewire Controller

public $allProperties;
public $filterProperties;
public $currentGroupFilter;

public function updatedFilterProperties(){

    if ($this->filterProperties){

        if (isset($this->currentGroupFilter)){
            session([
                    'filterScope-'.$this->currentGroupId() => $this->currentGroupFilter + array_filter($this->filterProperties),
                    ]);
        } else {
            session([
                    'filterScope-'.$this->currentGroupId() => array_filter($this->filterProperties),
                ]);
        }
    }
}

public function mount($parentGroup)
{
    
    $this->allProperties = $this->getProperties($this->productsId);

    if (session('filterScope-'.$this->currentGroupId())){
        $this->currentGroupFilter = session('filterScope-'.$this->currentGroupId());
//      $this->currentGroupFilter = array_map(fn($g) => ($g == true),$this->currentGroupFilter,);
        $this->updatedFilterProperties();
    }
}

And my blade

@foreach($allProperties  as $property)
    <div x-data="{ open: true }" class="border border-silver border-md p-2">
        <button @click="open = !open">{{$property->name}}</button>
        <ul x-show="open">
            @foreach($property->values()->wherePivotIn('product_id', $productsId)->get()->unique() as $propertyValue)
                <li>
                        <input wire:model="filterProperties.{{$propertyValue->id}}"
                               @if($currentGroupFilter)
                                   @checked(array_key_exists($propertyValue->id,$currentGroupFilter))
                               @endif
                               id="{{$propertyValue->id}}"
                               value="{{$propertyValue->id}}"
                               name="{{$propertyValue->id}}"
                               type="checkbox"
                               class="h-4 w-4 border-secondary-300 rounded text-indigo-600 focus:ring-indigo-500">
                        <label for="{{$propertyValue->id}}"
                               class="ml-3 text-sm text-gray-600"> {{$propertyValue->value}}
                        </label>
                </li>
            @endforeach
        </ul>
    </div>
@endforeach

In updatedFilterProperties() i intercept filterProperties and conditionally create or add elements to the session array.

In mount() you may notice in the commented line an attempt to convert currentGroupFilter to the form id=>true, but that didn't help either.

In blade, I successfully get currentgroupFilter and, as I already wrote, in principle, for a fraction of a second during rendering, the selected checkboxes are displayed correctly, but at the end of rendering they disappear.

I don't know what I'm doing wrong....

0 likes
6 replies
LaryAI's avatar
Level 58

It looks like the issue is related to the wire:model directive. The wire:model directive is used to bind data between the DOM and the Livewire component. When the page is loaded, the wire:model directive is evaluated and the checkboxes are displayed correctly. However, when the updatedFilterProperties() method is called, the wire:model directive is re-evaluated and the checkboxes are no longer displayed.

To fix this issue, you can try removing the wire:model directive from the checkboxes and instead use the @checked directive to set the checkbox state. This will ensure that the checkbox state is not re-evaluated when the updatedFilterProperties() method is called.

For example:

&lt;input 
    @if($currentGroupFilter)
        @checked(array_key_exists($propertyValue-&gt;id,$currentGroupFilter))
    @endif
    id=&quot;{{$propertyValue-&gt;id}}&quot;
    value=&quot;{{$propertyValue-&gt;id}}&quot;
    name=&quot;{{$propertyValue-&gt;id}}&quot;
    type=&quot;checkbox&quot;
    class=&quot;h-4 w-4 border-secondary-300 rounded text-indigo-600 focus:ring-indigo-500&quot;&gt;
Snapey's avatar
Snapey
Best Answer
Level 122

Dont try and handle the checked / unchecked state in the blade view. Wire:model will take care of that.

Just make sure the properties of your component are initialised with the correct true/false state for each checkbox and leave the rest to Livewire.

1 like
romatexdev's avatar

@Snapey I'm still a beginner in laravel/livewire. Could you give an example based on my code?

Please or to participate in this conversation.