Laravel Livewire 多类别过滤器不起作用

Question

我正在尝试在 laravel 中使用 livewire 进行简单过滤，但卡在了多个类别过滤器上。

// Filters
public $filter = [
    "title" => "",
    "rangeFrom" => "",
    "rangeTo" => "",
    "order_field" => "order_by_name_asc",
    "selectedCat" => [],
];
// method of query
else if(!empty($this->filter['selectedCat'])) {
        $categories = explode(',', $this->filter['selectedCat']);

        $products = Product::where('category_id',
                    function ($query) use ($categories) {
                                $query->whereIn('category_id', $categories);
                            })->limit($this->loadAmount)
                                ->get();
    }
// html[![enter image description here][1]][1]
<p class="mt-4">Catgegories</p>
    @foreach ($categories as $cat)
    <div class="flex" wire:key="{{ $cat->id }}">
        <input type="checkbox" id="{{ $cat->title }}"
                class="h-4 w-4 text-gray-700 border rounded mr-2"
                wire:model="filter.selectedCat"
                value="{{ $cat->id }}">
        <label for="{{ $cat->title }}">{{ $cat->title }}</label>
    </div>
    @endforeach

下图中的最终结果...

Answer 1

首先我们删除具有错误值的类别

public function getResultsProperty()
{

// First we remove the categories with a false value
$this->filters['categories'] = array_filter($this->filters['categories']);

if (empty($this->filters['categories'])) {
    return Product::all();
}

return Product::whereIn('category_id', array_keys($this->filters['categories']))->get();

}

Answer 2

您可以通过绑定到 dynamic 嵌套数组中的 dynamic 元素来实现您所追求的目标。

wire:model="filter.selectedCat.{{ $cat->id }}"

这样做是向数组中添加一个元素，其中key 是category 的id 和value 为真，或者一旦取消选择它为假。然后可以使用数组keys 来确定要过滤哪个categories，只需删除具有false 值的元素即可。

刀片文件

<div>
    @foreach ($this->categories as $category)
        <div class="flex items-center space-x-4 mb-2" wire:key="{{ $category->id }}">
            <input type="checkbox" id="{{ $category->title }}" name="{{ $category->title }}"
                wire:model="filters.categories.{{ $category->id }}" />
            <label for="{{ $category->title }}">{{ $category->title }}</label>
        </div>
    @endforeach

    <div class="grid grid-cols-4 gap-4">
        @foreach ($this->results as $result)
            <div>{{ $result->title }} ({{ $result->category->title }})</div>
        @endforeach
    </div>
</div>

组件

public $filters = [
    'categories' => [],
];

public function getCategoriesProperty()
{
    return Category::all();
}

public function getResultsProperty()
{
    if (empty($this->filters['categories'])) {
        return Product::all();
    }

    // this is where we remove the categories with a false value
    $this->filters['categories'] = array_filter($this->filters['categories']);

    return Product::whereIn('category_id', array_keys($this->filters['categories']))->get();
}

public function render()
{
    return view('livewire.category-filter');
}