My current structure:
Parent: SearchProducts
Has $this->brand
which is an array containing brand ids.
Child: FilterBrands
This is a child because a user can filter the list of brands based on their title which is handled in this child element. This all works fine.
In the child I have a foreach
generating the brand list based on the previous mentioned brand filter based on title, this is a list of checkboxes:
<input type="checkbox" id="{{ $brand->id }}" wire:click="$emitUp('filterBrandClick', {{ $brand->id }})" wire:loading.attr="disabled">
Then back to the parent:
public function filterBrandClick($brand_id)
{
if (($key = array_search($brand_id, $this->merk)) !== false) {
unset($this->merk[$key]);
} else {
$this->merk[] = $brand_id;
}
}
Again, this all works as expected.
But the problem is that these checkboxes are not in sync with the $this->brand
array in the parent.
Checking and unchecking states actually work because it’s a checkbox. But in the parent I also have:
public function clearBrandFilter()
{
$this->brand = [];
}
Which doesn’t sync to the child. Can’t figure out how to achieve this sync. I can’t just do wire:model="brand"
on the child’s checkbox.