already four days now, still have not reslove this challenge

Question

What am i not doing right? i'm woking on a livewire project that needs to get the grade_id's to show in show-component.blade.php, from Modules table which is related to a Grades table. My challenge is that, it only show a particular id, like the one in the mount section, so if i change it to 2 it will only show id's that are 2's, though thats really what i wanted but i can be change it manually.

use App\Models\Grade;
use App\Models\Module;
use Livewire\Component;

class ShowComponent extends Component
{
    public $modules;
    public $grades;

    public function mount()
    {
        $this->modules = Module::all()->where("grade_id", "1");

    }

    public function render()
    {
       return view('livewire.show-component');
    }
}

=========================================================================

show-component.blade.php

@foreach($modules as $module)
        <div class="flex flex-col grid-cols-12 md:grid text-gray-50">


                <div class="flex md:contents">
                    <div class="relative col-start-2 col-end-4 mr-10 md:mx-auto">
                        <div class="flex items-center justify-center w-6 h-full">
                        <div class="w-1 h-full bg-green-500 pointer-events-none"></div>
                        </div>
                        <div class="absolute w-6 h-6 -mt-3 text-center bg-green-500 rounded-full shadow top-1/2">
                        <i class="text-white fas fa-check-circle"></i>
                        </div>
                    </div>
                    <div class="w-full col-start-4 col-end-12 p-4 my-4 mr-auto bg-green-500 shadow-md rounded-xl">
                        <h2 class="mb-1 text-lg font-semibold">
                            {{ $module->name }}
                        </h2>
                        <p class="w-full leading-tight text-justify">

                            <a href="{{ url('storage/videos'.$module->video) }}">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
                                </svg>
                            </a>

                        </p>
                    </div>
                </div>

        </div>
    @endforeach

==================================================================

Module's Model

public function grade()
{
    return $this->belongsTo(Grade::class, 'grade_id', 'id');

}

===============================================================

Grade's Model

public function curricula()
{
    return $this->belongsTo(Curriculum::class, 'curricula_id', 'id');
}


public function module()
{
    return $this->hasMany(Module::class);
}

Answer 1

I think what you want is ..

Add

public $grade_id;

Then in mount

$this->modules = Module::where("grade_id", $this->grade_id)->get();

When you load your component you can pass grade_id to it