Problem: I can't display values i want from my queries and database in a component on Laravel L-CodePudding

I'm still new on Laravel and I'm still working on this project now: So basically I have a table Recipes containing recipes with a name and vegetabes, a pivot table Recipes_vegetables and a table vegetables. What i want is a search input that is gonna give me the values of my different tables that fit the input. So this is my code:

Search.php:

<?php

namespace App\Http\Livewire;

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

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

    public $vegetables;
    public $recipes;

    public function updatedQuery() 
    {
        $this->vegetables = Vegetable::where('name', 'like', '%'.$this->query.'%')
                            ->with('recipes')
                            ->get();

        $this->recipes = Recipe::where('name', 'like', '%'.$this->query.'%')
                            ->with('vegetables')
                            ->get();
    }

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

search.blade.php :

<div >
  <h1>Search</h1>
  <input wire:model="query" type="text" placeholder="Search...">
  @if(!empty($query))
    <ul>
      @if(!empty($recipes))
        <div >
          @foreach($vegetables as $vegetable)
           
              <li><span >lunch_dining</span>{{ $vegetable->name }}</li>
            
          @endforeach
        </div>
      @else
        <li>No result</li>
      @endif
      <div >
        @foreach($recipes as $recipe)
          @foreach($recipe->vegetables as $vegetable)
            <li><span >menu_book</span>{{ $recipe->name }}<span >Ingredient: {{ $vegetable->name }}</span></li>
          @endforeach
        @endforeach
      </div>
    </ul>
  @endif
</div>

Recipe.php :

<?php

namespace App\Models;

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

class Recipe extends Model
{
    use HasFactory;
    
    public $timestamps = false;

    protected $fillable = ['name'];

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

}

Vegetable.php :

<?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');
    }

}

So basically this is what i get right now:

1st case: I'm typing a vegetable's name in the input:

What I should have :

Get every vegetable's name that fits the input AND get every recipe's name that fits the input AND get every recipe that has a vegetable 's name that fits the input Exemple: I have a fish and chips recipe that has 'Potatoes' as an ingredient linked with the pivot table. If i type 'Po' I should have on my render:

Potato
Fish and chips (because the recipe is made with potatoes)

What I actually have right now:

If i type 'po': I'm only getting the results that have 'Po' in their name, so i'm getting Potato, but i'm not getting Fish and chips. If i type Fish tho, i'm getting Fish and chips.

2nd case::I'm typing a recipe's name in the input.

What I should have:

Get every recipe's name that fits the input AND get every vegetable's name that fits the input AND every vegetable that is needed for a recipe that fits the input. Exemple: I have in my vegetables table : Egg, sugar, chocolate. My recipe table has a 'cake' and with the pivot table i linked the cake with my egg my chocolate and my sugar. Now if i type 'cake' in my input i should have in the first div 'vegetables':

Sugar
Chocolate
Egg

And in my second div I should have 3 entries:

Cake, ingredient : Sugar
Cake, ingredient : Egg
Cake, ingredient : Chocolate

What I actually have :

All the second part, but I'm not getting any entry in my vegetable div....

Any idea how to solve those 2 problems ? Don’t hesitate to ask for any clarification or precision

CodePudding user response：