如何使用 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 到 return 的数组连接起来，只有搜索名称的结果？

Answer 1

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

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

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

如何使用 Laravel Livewire 过滤数组？

How to filter a array with Laravel Livewire?

laravel

laravel-livewire