Hello all,

I'm new at Laravel and playing around. I was created an cost management system with LAravel 6 and I gonna improve this scripts with Laravel 8 and Livewire.

I have 2 tables whichs are Sponsor and Project. Sponsors are a lot of projects and every project has 1 sponsor. So the tables relations are hasOne and belongsTo.

In my script when I choose a Sponsor, I wanna see sponsor's project only and select.

I searched a lot of source and tutorial and as a result ı wanna publish the working codes.

My elequent model php files are shown below;

App/Models/projects.php

namespace App\Models;

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

class Projects extends Model
{ 
use HasFactory; 
protected $guarded = []; 
protected $primarykey = "id"; 

public function sponsors() {

return $this->belongsTo(Sponsors::class, 'sponsor_id'); }

}

App/Models/sponsors.php

namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use App\Model\Projects;

class Sponsors extends Model {
use HasFactory;
protected $guarded = [];
protected $primarykey = "id";
public function projects() {
return $this->hasMany(Projects::class);
}
}

This models set the relations between sponsors and projects. Now let's see the magic with Livewire.

!You must install livewire and add @livewirestyle and @livewirescripts in your blade(layouts.app maybe) see livewire Quick Start or You can google it to install livewire.

Let's make our livewire components (blade and livewire component file.)

php artisan make:livewire projectSponsorDropdown

resources/views/livewire/project-sponsor-dropdown.blade.php

<div>
            <div class="form-group">
                <label for="sponsor_id">{{ __('trnslt.Sponsor_Name') }}</label>
                <select name="sponsor_id" id="sponsor_id" wire:model="sponsor" class="form-control" >
                <option value=''>Choose A Sponsor</option>
                @foreach($sponsors as $sponsor)
                    <option value={{ $sponsor->id }}>{{ $sponsor->name }}</option>
                @endforeach
                </select>
            </div>


            @if(count($this->projects) > 0) 
                <div class="form-group">
                    <label for="project_id">{{ __('trnslt.Project_Name') }}</label>
                    <select name="project_id" id="project_id" wire:model="project" class="form-control {{ count($this->projects)==0 ? 'hidden' : '' }}" >
                    <option value=''>Choose A Project</option>
                    @foreach($this->projects as $project)
                        <option value={{ $project->id }}>{{ $project->name }}</option>
                    @endforeach
                    </select>
                </div>
            @endif
</div>

Than code the component

App/Http/Livewire/ProjectSponsorDropdown.php

<?php


namespace App\Http\Livewire;


use Livewire\Component;
use App\Models\Projects;
use App\Models\Sponsors;


class ProjectSponsorDropdown extends Component
{


    public $sponsors;
    public $projects = [];
    public $sponsor;
    public $project;


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


    private function refreshData()
    {
        $this->sponsors = Sponsors::orderBy('name')->get();
        if (!empty($this->sponsor)) {
            $this->projects = Projects::where('sponsor_id', $this->sponsor)->get();
        }
    }
    
    public function render()
    {
        $this->refreshData();
        return view('livewire.project-sponsor-dropdown');           
}

That's all. Now we can use this dropdown selects where ever we want with include our Livewire Component

@livewire('project-sponsor-dropdown')

İf you have any question please comment below.