Trying to make select option to work in livewire

Question

I am getting this error when I try to submit the selected option using Laravel Livewire.

Illuminate\Database\QueryException SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'team_id' cannot be null (SQL: insert into projects (user_id, name, description, team_id, updated_at, created_at) values (1, Sammy Mwangangi, qdqwfdweqfc wqdqwfdwqdqwdwq, ?, 2021-06-24 13:39:14, 2021-06-24 13:39:14))

App\Models\Project.php

<?php

namespace App\Models;

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

class Project extends Model
{
    use HasFactory;

    protected $fillable = [
        'name',
        'description',
        'team_id',
    ];

    // protected $guarded = [];

    public function tasks(){
        return $this->hasMany(Task::class);
    }

    public function user(){
        return $this->belongsTo(User::class);
    }

    public function team(){
        return $this->belongsTo(Team::class);
    }
}

App\Http\Livewire\Project.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Project;
use App\Models\Team;
use Livewire\WithPagination;
use Illuminate\Support\Str;
use Auth;

class Projects extends Component
{
    use WithPagination;

    public $name;
    public $description;
    public $team_id;
    public $projectId = null;
    
    public $showModalForm = false;

    public function showCreateProjectModal()
    {
        $this->showModalForm = true;
    }

    public function updatedShowModalForm()
    {
        $this->reset();
    }

    public function storeProject()
    {
        $this->validate([
          'name' =>'required',
          'description'  => 'required',
      ]);

        $project =new Project();
        $project->user_id = auth()->user()->id;
        $project->name = $this->name;
        $project->description = $this->description;
        $project->team_id = $this->team_id;
        $project->save();
        $this->reset();
        session()->flash('flash.banner', 'Project created Successfully');
    }
    public function showEditProjectModal($id)
    {
        $this->reset();
        $this->showModalForm = true;
        $this->projectId = $id;
        $this->loadEditForm();
    }

    public function loadEditForm()
    {
        $project = Project::findOrFail($this->projectId);
        $this->name = $project->name;
        $this->description = $project->description;
    }

    public function updateProject()
    {
        $this->validate([
          'name' =>'required',
          'description'  => 'required',
      ]);

        Project::find($this->projectId)->update([
             'name' => $this->name,
             'description'  => $this->description
        ]);
        $this->reset();
        session()->flash('flash.banner', 'Project Updated Successfully');
    }

    public function deleteProject($id)
    {
        $project = Project::find($id);
        $project->delete();
        session()->flash('flash.banner', 'Project Deleted Successfully');
    }

    public function render()
    {
        return view('livewire.projects', [
            'projects' => Project::orderBy('created_at', 'DESC')->paginate(5),
            'teams' => Team::all()
        ]);
    }
}

projects.blade.php

        <div class="flex flex-wrap mb-6">
            <label for="team" class="block text-gray-700 dark:text-white text-sm font-bold mb-2">
              {{ __('Team') }}:
            </label>

            <select class="form-select px-4 py-3 w-full rounded" wire:model="team_id" name="team_id">
              @foreach($teams as $team)
                <option value="{{$team->id}}">{{$team->name}}</option>
              @endforeach
            </select>
            <p class="mt-2 text-sm text-gray-500">
              Select the team/department your project is associated with.
            </p>

            @error('team_id')
            <p class="text-red-500 text-xs italic mt-4">
              {{ $message }}
            </p>
            @enderror
          </div>

What am I missing? I haven't done much with livewire regarding model relationships and how to bind data between the models.

Answer 1

you must do a default tag option for select, this way on change element this will bind the value to the property

<select class="form-select px-4 py-3 w-full rounded" wire:model="team_id">
   <option>Select Team</option>
   @foreach($teams as $team)
     <option value="{{$team->id}}">{{$team->name}}</option>
   @endforeach
</select>

also in the validation rules you can add another for the "team_id" value that can't be null on submit