如何在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数组连接起来，以仅返回具有搜索名称的结果？

- Peter Boomsma

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组件视图将基本保持不变，只需替换您的@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>

- Peppermintology