无法使用 Laravel Livewire 显示我的数据库中的值

Question

I'm using a Livewire component, this is my code:

Search.php:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Recipe;
use App\Models\Vegetable;
use App\Models\VegetablesRecipe;


class Search extends Component
{
    public $query;
    public $vegetables;

    public function mount()
    {
        $this->resetQuery();
    }

    public function resetQuery()
    {
        $this->vegetables = [];
    }

    public function updateQuery()
    {
        $this->vegetables = Vegetable::where('name', 'like', '%'.$this->query.'%')->get()->toArray();
    }

    public function render()
    {
        return view('livewire.search');
    }
}

search.blade.php:

<div class="searchcomponent">
    <h1>Search</h1>
    <input wire:model="query" type="text" placeholder="Rechercher...">
    
    @if(!empty($query))
        <ul>
            @if(!empty($vegetables))
                <div class="vegetables">

                    @foreach($vegetables as $vegetable)
                        <li><span class="material-icons">lunch_dining</span>{{ $vegetable['name'] }}</li>
                    @endforeach
                
                </div>
            @else
                <li>No result</li>
            @endif
       </ul>
    @endif
</div>

My vegetable Model:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Vegetable extends Model
{
    use HasFactory;

    public $timestamps = false;

    protected $fillable = ['name'];

    public function recipes(){
        return $this->belongsToMany(Recipe::class, 'vegetables_recipes', 'vegetable_id', 'recipe_id');
    }

    public function getName($id) {
        return $this->name;
    }
}

My problem is, every time im typing something in my search bar, I just have a No result appearing on my screen even tho i seeded my data base with some vegetables already. Why doesn't it show me for example Carrot when i type it?

Answer 1

You're only pulling in your Vegetables once the function "updateQuery" has been called. I'd recommend adding it to your render and setting public $query; to an empty string, eg public $query = '';

if ($this->query != null) {
    return view('livewire.search', [
        'vegetables' => Vegetable::where('name', 'like', '%'.$this->query.'%')->get()->toArray()
    ]);
} else {
    return view('livewire.search', [
        'vegetables' => Vegetable::all()->toArray()
    ])
}

This way if the query is empty it will continue to show the vegetables, but once you begin to search it'll filter it using the where clause.