如何使用 Laravel Livewire 过滤数组？答案

【问题标题】：How to filter a array with Laravel Livewire?如何使用 Laravel Livewire 过滤数组？
【发布时间】：2021-08-18 11:34:36
【问题描述】：

我有一个简单的 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",
        }
      ]';
    }
}

刀片/视图

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

【问题讨论】：

标签： laravel laravel-livewire

【解决方案1】：

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

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

我们在上面所做的是将数组转换为集合，然后使用reject 函数返回一个新的结果集合，其中 name 属性以$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>

【讨论】：