laravel - 如何使用 Laravel Livewire 过滤数组？

Question

我有一个简单的 Livewire 组件，如下所示

use Livewire\Component;

class KandidaatList extends Component
{
    public $kandidaten = [];

    public function mount()
    {
        $this->kandidaten = '[
        {
          "naam" : "Aad Elias",
          "geslacht": "m",
          "leeftijd": "35",
          "woonplaats": "Groningen",
        },
        {
          "naam" : "Linda de Jong",
          "geslacht": "v",
          "leeftijd": "24",
          "woonplaats": "Mantgum",
        }
      ]';
    }
}

Blade / View

<div>
    @foreach (json_decode($kandidaten) as $kandidaat)
      <div class="pl-14 py-5 border-b border-grey-600 flex justify-around">
        <div>{{$kandidaat->naam}}</div>
        <div>{{$kandidaat->leeftijd}}</div>
        <div>{{$kandidaat->woonplaats}}</div>
        <div class="c-tag c-tag--primary h-5">{{$kandidaat->status}}</div>
      </div>
    @endforeach
</div>

现在我想添加一个功能，以便我可以过滤数组。例如，如果我输入名称 Aad Elias，则只会显示具有该名称的结果。

我生成了一个包含搜索查询的组件，如下所示。

namespace App\Http\Livewire;

use Livewire\Component;

class Search extends Component
{
    public $query;
    
    public function mount()
    {
      $this->query = 'search query';
    }
}

现在，我可以在 Blade 中输出键入的查询。

<div>
    <input wire:model="query" type="text">
    {{ $query }}
</div>

但是，如何将我在此输入字段中键入的查询与 KandidaatList 中的数组连接起来，以仅返回具有搜索名称的结果？

Answer 1

如果您按照示例处理数组，我会将其解析为 collection这样您就可以访问所有帮助程序方法，从而使使用数组变得更加简单。然后，您可以利用一些 collection 函数来过滤您的结果。

$results = collect(json_decode($kandidaten))->reject(function($item) use ($query) {
    return !preg_match("#^'. $query .'#i', $item->naam);
});

我们上面所做的是将数组转换为集合，然后使用 reject函数返回一个新的结果集合，其中名称属性以 $query 开头。

如果你正在使用 Eloquent 模型和数据库，我要做的第一件事就是定义一个 $results 计算属性，这样做的好处是它会根据请求被缓存，所以调用 $results x 次将不会进行单独的数据库调用。

public function getResultsProperty()
{
    return $this->search($this->$query);
}

然后定义一个 search 函数，由 $results 计算属性使用。

public function search()
{
    return Kandidaten::where('naam', 'like', "{$this->query}%")->get();
}

注意:我有意从 like 的开头排除了 %，但您可以进行任何对您的用例有意义的搜索.

您的 Livewire 组件 View 将基本保持不变，只是替换您的 @foreach 的内容。

<div>
    @foreach ($this->results as $kandidaat)
      <div class="pl-14 py-5 border-b border-grey-600 flex justify-around">
        <div>{{$kandidaat->naam}}</div>
        <div>{{$kandidaat->leeftijd}}</div>
        <div>{{$kandidaat->woonplaats}}</div>
        <div class="c-tag c-tag--primary h-5">{{$kandidaat->status}}</div>
      </div>
    @endforeach
</div>