I remember having a problem like this. Check out this is could hold the answer.
Livewire checkbox filters - checkboxes disappearing
I'm building a full page Livewire component that filters Meilisearch results.
When I check one of the filters the remaning checkboxes disappear, and I am struggling to understand why. I followed a tutorial to figure out how to build the bulk of the component and in the tutorial the behaviour didn't occur. I've deconstructed the component to the bare minimum and the behaviour happens as soon as I wire up the checkboxes.
Here is the component :
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\CourseDate;
use App\Models\Course;
class CourseBrowser extends Component
{
public $queryFilters = [];
public $priceRange = [
'min' => null,
'max' => null
];
public function mount()
{
$this->queryFilters = [
'venue' => [],
'type' => [],
'category' => [],
'days' => [],
'supplier' => []
];
}
public function render()
{
$search = CourseDate::search(
'',
function ($meilisearch, string $query, array $options) {
$filters = collect($this->queryFilters)
->filter(fn ($filter) => !empty($filter))
->recursive()
->map(function ($value, $key) {
return $value->map(fn ($value) => $key . ' = "' . $value . '"');
})
->flatten()
->join(' AND ');
$options['facets'] = ['venue', 'category', 'type', 'supplier', 'days'];
$options['filter'] = null;
if ($filters) {
$options['filter'] = $filters;
}
if ($this->priceRange['max']) {
$options['filter'] .= (isset($options['filter']) ? ' AND ' : '') . 'price <= ' . $this->priceRange['max'];
}
return $meilisearch->search($query, $options);
}
)->raw();
$coursedates = CourseDate::find(collect($search['hits'])->pluck('id'));
$minPrice = Course::all()->min('price');
$maxPrice = Course::all()->max('price');
$this->priceRange['min'] = $this->priceRange['min'] ?: $minPrice;
$this->priceRange['max'] = $this->priceRange['max'] ?: $maxPrice;
return view('livewire.course-browser')
->with(
[
'coursedates' => $coursedates,
'filters' => $search['facetDistribution'],
'minPrice' => $minPrice,
'maxPrice' => $maxPrice,
]
);
}
}
and the blade view is thus:
(I've ommited everyhing outside of the wired up checkboxes and styling for brevity - by all means I can share the whole thing if neccesary
<input type="checkbox" wire:model="queryFilters.{{ $title }}"
id="{{ $title }}_{{ strtolower($option) }}"
value="{{ $option }}">
Here is a gif of what happens:
Thanks in advance
Please or to participate in this conversation.