Multiple checkboxes in one component, best practice

#1

Dear all,

I’m just starting out with Livewire and very excited. I currently have a working app but I feel like I’m not being as efficient as possible regarding the number of ajax/update requests.

I’m building an estate agent website where the search page has a sidebar with filter options and the main content is the search result. There are multiple filters, each filter is a component and the filters/components range from 3 up to 12 checkboxes.

Each checkbox looks like this:

<input wire:model="selectedOptions" {{ $options['selected'] ? 'checked ' : '' }}id="{{ $options['name'] }}" name="{{ $options['name'] }}" value="{{ $options['name'] }}" type="checkbox" class="h-4 w-4 text-blue-400 border-gray-300 rounded cursor-pointer focus:outline-none">

So each checkbox uses the basic wire:model mechanism. Now if a user selects 5 checkboxes within one filter/component in quick succession (I doubt much real world users will do so, but still), the same component is refreshed 5 times.

I’m wondering how this can be handled more efficiently? I’ve looked at debounce, lazy and defer updating but those seem more suitable for text input fields. In my case, there’s no defined trigger like hitting another button, or clicking away from a text input field, to commence the deferred/debounced/lazied updates.

Considered using Alpine, with the checkboxes not having wire:model but the checkboxes modifying a hidden field through Alpine and having wire:model on that field but then I still have the problem of how to initiate the wire:model on the hidden field, after say, xx milliseconds have passed.

Another point of view: maybe I’m overthinking this too much and are the quick successive requests not that much of a design flaw or a real-world problem.

Would love to hear some thoughts of more experienced peeps.

Cheers!

#2

This is the intended action for wire:model you want the component to convey the changes in real time as they happen. If you want the filters to be applied at one time, you should think about a button that will re-run your query on wire:click. I’m unsure how your component logic is set up to run the query but my guess is that everytime something changes, it’s being re-rendered. You can prevent that by structuring your code differently.

You can also go down the Alpine path. You can set livewire variables by using @this.set('variable', 'value') but this is largely the same issue as you’re experiencing and wouldn’t be as UX friendly as an “Apply Filters” button.

#3

Hi Short Brown man,

Thanks for pitching in. I eventually decided on just having the component re-render each time for now. It’s only 5-15kb of data being sent back by the livewire component to the browser so it’s def fast enough. And as you said, without a apply filters button or similar other event it’s just not possible to defer/bundle all previously changed checkboxes.

Cheers!