laravel - 如何使用 Livewire 组件中的嵌套属性更新浏览器的查询字符串

Question

这是我的组件的示例:

class ProductCatalogue extends Component
{
    public array $filters = [
        'search' => '',
        'product-category' => '',
        'product-type' => '',
        'product-composition' => '',
        'product-size' => '',
        'min-price' => null,
        'max-price' => null,
    ];

    protected $queryString = ['filters'];

    public function render()
    {
        return view('livewire.product-catalogue', [
            'products' => Product::query()
                ->when($this->filters['product-category'], function ($query) { ... }
                ->when($this->filters['product-type'], function ($query) { ... }
                ->when($this->filters['product-composition'], function ($query) { ... }
                ->when($this->filters['product-size'], function ($query) { ... }
                ->when($this->filters['min-price'], function ($query) { ... }
                ->when($this->filters['max-price'], function ($query) { ... }
                ->when($this->filters['search'], function ($query) { ... }
                ->paginate(10)
        ]);
    }
}

这可行，但查询参数是:

?filters%5Bsearch%5D=&filters%5Bproduct-category%5D=&filters%5Bproduct-type%5D=&filters%5Bproduct-composition%5D=&filters%5Bproduct-size%5D=&filters%5Bmin-price %5D=&filters%5Bmax-price%5D=

如何设置$queryString属性输出如下查询参数:

?search=&product-category=&product-type=&product-composition=&product-size=&min-price=&max-price

我尝试将 $queryString 属性设置为:

protected $queryString = [
    'filters.search' => ['except' => ''],
    'filters.product-category' => ['except' => ''],
    'filters.product-type' => ['except' => ''],
    'filters.product-composition' => ['except' => ''],
    'filters.product-type' => ['except' => ''],
    'filters.min-price' => ['except' => null],
    'filters.max-price' => ['except' => null],
];

但这会抛出以下 PropertyNotFoundException:未在组件上找到属性 [$filters.search]

是否可以这样做，或者是否必须单独定义每个属性，即 public string $search; 等？

Answer 1

我找到的最佳解决方案是:

protected $queryString = [
    'filters' => ['except' => [
        'search' => '',
        'product-category' => '',
        'product-composition' => '',
        'product-type' => '',
        'min-price' => '',
        'max-price' => '',
    ]],
];

只要没有设置嵌套属性，这就会产生一个干净的 queryString。另一种方法是不支持接缝(目前)，或者我根本不知道该怎么做。

GitHub 上有几个关于这个主题的讨论。

https://github.com/livewire/livewire/discussions/2036

https://github.com/livewire/livewire/issues/1909