如何在 Livewire 中使用嵌套表单字段？答案

【问题标题】：How to use Nested Form Fields in Livewire?如何在 Livewire 中使用嵌套表单字段？
【发布时间】：2021-04-28 06:25:47
【问题描述】：

我有一个名为project-form 的组件，我再次调用另一个名为search-users 的组件。问题是我无法从嵌套组件（即search-users）中设置ProjectForm 中的$members 属性。

据我所知，$members 必须在 SearchUsers.php 中设置，但我希望必须在 ProjectForm.php 中设置，以便我可以保存在 db 中。

project-form.blade.php

<form wire:submit.prevent="submit">
   <input wire:model="name"/>
   <input wire:model="category"/>
   <input wire:model="target_date"/>

   @livewire('search-users')
</form>

ProjectForm.php

<?php

namespace App\Http\Livewire;

use App\Models\Project;
use Livewire\Component;

class ProjectForm extends Component
{

    public string $name = '';
    public string $category = '';
    public string $target_date = '';
    public array $members = [];
    
    protected $rules = [
        'name' => 'required',
        'category' => 'required',
        'target_date' => 'required',
    ];

    public function submit(){
        
        $validated = $this->validate();
        Project::create($validated);
        toastr()->success('Project Created Successfully');
    }

    public function render()
    {
        return view('livewire.project-form');
    }
}

search-users.blade.php

@foreach($users as $user)
    <label class="list-group-item ps-0 border-0 d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <img alt="{{ $user->name }}" src="{{ url('storage/'.$user->avatar) }}" width="35" class="me-3 rounded-circle mx-auto d-block">
            {{ $user->name }}
        </div>
        <input class="form-check-input me-1" wire:model.defer="members" type="checkbox" value="{{ $user->id }}">
    </label>
@endforeach

【问题讨论】：

要在组件之间进行通信，你需要从你的搜索组件中发出一个事件，并在表单组件中监听它

标签： php laravel laravel-8 laravel-livewire

【解决方案1】：

正如@Qirel 已经建议的那样，您应该使用Livewire events。

在您的搜索组件中，您可以发出一个事件 memebersFound 并将搜索中的成员作为参数传递（参见 Livewire Passing parameters in events），如下所示

$this->emit('membersFound', $membersFound);

然后，在你的 ProjectForm 组件中你应该监听这个事件

protected $listeners = [
  'membersFound' => 'addMembers'
];

public function addMembers(array $members)
{
  $this->members = $members;
}

【讨论】：