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

【问题标题】：How to update the browser's query string with nested properties in a Livewire component如何使用 Livewire 组件中的嵌套属性更新浏览器的查询字符串
【发布时间】：2021-03-17 04:33:11
【问题描述】：

这是我的组件的一个示例：

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： Property [$filters.search] not found on component

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

【问题讨论】：

PW_Parsons，您找到解决方案了吗？我也遇到了这个问题；尝试了不同的选择，但到目前为止没有成功。

标签： laravel laravel-livewire

【解决方案1】：

在这一点上，我建议坚持创建单个变量。使用camelCase

例如

public $search = '';
public $productCategory = '';
public $productType = '';
public $productComposition = '';
public $productSize = '';
public $minPrice = null;
public $maxPrice = null;


protected $queryString = [
    'search' => ['except' => ''],
    'productCategory' => ['except' => ''],
    'productType' => ['except' => ''],
    'productComposition' => ['except' => ''],
    'productSize' => ['except' => ''],
    'minPrice' => ['except' => null],
    'maxPrice' => ['except' => null],
];

这会给你预期的结果。

【讨论】：

【解决方案2】：

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

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

【讨论】：