Can't display the values from my data base with 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 render()
    {
        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()
            ]);
        }
    }
}

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? Or how can i fill my array vegetables with all the names of my vegetables datatable ?

Answer 1

Defining public $vegetables; will prevent you from passing it to the view. Remove that. Also remove your mounting logic.

Thus you should have:

class Search extends Component
{
    public $query = '';

    public function render()
    {
        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()
            ]);
        }
    }
}

Also make sure you are calling @livewireScripts and @livewireStyles or their alternative syntaxes <livewire:styles /> <livewire:scripts /> from your main view which uses <livewire:search />.

Edit:

Alternatively, you could also use a public properly and write to it using $this->vegetables like so:

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

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