I have a simple Livewire component, like the following
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>
Now I would like to add a feature so I can filter through the array. For example, if I would type in the name Aad Elias
that only results with that name show up.
I've generated a component that holds a search query, like the following.
namespace App\Http\Livewire;
use Livewire\Component;
class Search extends Component
{
public $query;
public function mount()
{
$this->query = 'search query';
}
}
And for now, I can output the typed a query in the Blade.
<div>
<input wire:model="query" type="text">
{{ $query }}
</div>
But how do I connect the query I type in this input field with the array from KandidaatList
to return only results with the searched name?