尝试使 select 选项在 livewire 中工作

Question

当我尝试使用 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>

我错过了什么？关于模型关系以及如何在模型之间绑定数据，我对 livewire 做的不多。

Answer 1

wire:model 应该在 option 标签上而不是在 select

上

Answer 2

您必须为 select 做一个默认标签选项，这样在更改元素时会将值绑定到属性

<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>

同样在验证规则中，您可以为提交时不能为空的“team_id”值添加另一个

尝试使 select 选项在 livewire 中工作

Trying to make select option to work in livewire

laravel

laravel-livewire