Incomprehensible behavior of checkboxes in Livewire

✔ Recommended Answer

As it turned out, the @checked check does not work in livewire. The solution was to change the input in the blade view

<input wire:model="filterProperties.{{$propertyValue->id}}"                                                           id="{{$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>

mount():

    public function mount($parentGroup){    $this->currentGroupId = $parentGroup->id;    session([        'currentGroupId' => $this->currentGroupId,    ]);    $this->products_tpl = $this->getProducts($this->currentGroupId())->cursorPaginate(30);    $this->products = collect($this->products_tpl->items());    $this->childGroups = $parentGroup->childGroups;    $this->allProperties = $this->getProperties($this->productsId);    if (session('filterScope-'.$this->currentGroupId())){        $this->filterProperties = session('filterScope-'.$this->currentGroupId());        $this->updatedFilterProperties();    }}

and updated():

public function updatedFilterProperties(){    if ($this->filterProperties){            session([                'filterScope-'.$this->currentGroupId() => array_filter($this->filterProperties),            ]);    }    if (Arr::first(session('filterScope-'.$this->currentGroupId())) != null){        $this->products_tpl = $this->getProducts($this->currentGroupId())->whereHas('values', function ($q) {            $q->whereIn('property_value_id', array_keys(session('filterScope-'.$this->currentGroupId())));        })->cursorPaginate(30);    }    if (Arr::first(session('filterScope-'.$this->currentGroupId())) == null){        $this->products_tpl = $this->getProducts($this->currentGroupId())->cursorPaginate(30);    }    $this->products = collect($this->products_tpl->items());}

Now the selected checkboxes are loaded as expected from the array that is stored in the session, and also based on this array, we filter the result in advance.

Source: stackoverflow.com

Answered By: RomatexDev

 Based on the description of the behavior you are experiencing, it is likely that the issue is related to how Livewire is handling the state of the checkboxes.

When you use wire:model to bind the state of a checkbox to a Livewire property, Livewire will dynamically update the state of that property as the user interacts with the checkbox. This can result in the checkbox being displayed as checked or unchecked based on the current value of the property.

However, when the Livewire component is rendered, the state of the properties may not be immediately available or may still be in the process of being updated. This can result in the checkboxes being displayed correctly for a brief moment and then disappearing as Livewire finishes rendering the component.

If you remove wire:model, the state of the checkboxes will be static and not bound to a Livewire property. This means that the checkboxes will always be displayed in the state they were initially rendered in.

To resolve the issue with the disappearing checkboxes, you may need to ensure that the Livewire component has fully updated the state of the properties before rendering the checkboxes. One way to do this is to use the wire:loading directive to conditionally display a loading indicator while the component is still updating.

Another approach may be to use JavaScript to initialize the state of the checkboxes based on the current value of the Livewire property after the component has finished rendering.

It's difficult to provide a more specific solution without seeing the code for your Livewire component and how the checkboxes are being rendered. However, I hope this information helps you understand the possible cause of the behavior you are experiencing.

Comments

Post a Comment

Most Popular

PhpStorm, return value is expected to be 'A', 'object' returned

Image
✔ Recommended Answer Has to be because object can be ANY class instance, even B etc. You can annotate the create() method with generics PHPDoc to tell that the return type will be the same as the input parameter class string. It gives more context info to the IDE. /** * @template T * * @param string $class * @return T */ private function create(string $class) : object { return new $class(); } P.S. Instead of create('B'); better use create(B::class) . This way the IDE can track the usages of that class for refactoring/search purposes etc. Source: stackoverflow.com Answered By: LazyOne Method #2 This error message suggests that your code is expecting a value of type 'A' to be returned, but instead, the code is returning an object. This error can occur in PhpStorm, or any other PHP development environment. To resolve this error, you should check the function or method that is returning the object and ensure that it is returning
Read more

Remove Unicode Zero Width Space PHP

✔ Recommended Answer This: $newBody = str_replace("&#8203;", "", $newBody); presumes the text is HTML entity encoded. This: $newBody = str_replace("\xE2\x80\x8C", "", $newBody); should work if the offending characters are not encoded, but matches the wrong character (0xe2808c). To match the same character as #8203; you need 0xe2808b: $newBody = str_replace("\xE2\x80\x8B", "", $newBody); Source: stackoverflow.com Answered By: Jef Method #2 To remove Unicode zero width space (ZWSP) from a string in PHP, you can use the str_replace() function to replace the ZWSP character with an empty string. Here's an example: php $str = "Hello&ZeroWidthSpace; World" ; // Contains ZWSP after "Hello" // Replace ZWSP with an empty string $str = str_replace ( "\u{200B}" , "" , $str ); echo $str ; // Outputs "Hello World" without ZWSP In this example, the str_replace() functi
Read more

Laravel file upload returns forbidden 403, file permission is 700 not 755

✔ Recommended Answer The issue you are facing could be due to incorrect file permissions for the storage folder. Here are some steps to fix the problem: SSH into your cPanel server. Change the permission of the storage folder to 755: chmod -R 755 storage/ This command will change the permission of the storage folder and all its contents to 755, which should give the web server permission to read and write to the folder. Check the ownership of the storage folder. Ensure that the owner of the folder is the same as the user running the web server (typically www-data on Apache): ls -l This command will list the files and folders in the current directory along with their ownership and permission details. Make sure that the owner of the storage folder is the same as the user running the web server. If the ownership is incorrect, you can change it using the following command: chown -R www-data:www-data storage/ This command will change the ownership of the storage folder and all its conten
Read more