使用父视图中的 <form> 在 Livewire 子视图中提交数据答案

【问题标题】：Submitting data in a Livewire child view using its <form> in the parent view使用父视图中的 <form> 在 Livewire 子视图中提交数据
【发布时间】：2021-10-26 18:28:58
【问题描述】：

我有一个父视图 edit.blade.php 有一个表单。表单有一个 @livewire() 用于 edit-step.blade.php，子组件。

edit-step.blade.php 有一个用于呈现输入字段的 foreach 循环。在某一时刻，foreach 将循环三个 input 字段。提交按钮位于父视图 edit.blade.php 中。提交时，最后一个输入字段中的数据是唯一提交的数据。如何提交来自所有输入字段的数据？

edit.blade.php 文件：

    <form method="post" action="{{route('todo.update', $todo->id)}}" class="py-5">
        @csrf
        @method('patch')
        <div class="py-1"><input type="text" name="title" value="{{$todo->title}}" class="py-2 px-2 border rounded" placeholder="Title" /></div>
        <div class="py-1">
            <textarea name="description" class="p-2 rounded border" placeholder="Description">{{$todo->description}}</textarea>
        </div>
        <div class="py-2">
            @livewire('edit-step', ['steps' => $todo->steps])
        </div>
        <div class="py-1"><input type="submit" value="Update" class="p-2 border rounded" /></div>
    </form>

edit-step.blade.php 文件：

    @foreach($steps as $step)
        <div class="flex justify-center py-2" wire:key="{{$loop->index}}" >
            
            <input type="text" name="step_" class="py-1 px-2 border rounded" placeholder="{{ 'Describe Step '.($loop->index + 1) }}" @if ( is_object($step) ) value="{{ $step->name }}" @endif />
            
            
            <span class="fas fa-times text-red-400 p-2" wire:click="remove({{$loop->index}})"/>
        </div>
    @endforeach

【问题讨论】：

这里是使用 livewire 的多步表单示例。 ascsoftwares.com/technology/multi-step-form-using-livewire/…

标签： php arrays laravel laravel-blade laravel-livewire

【解决方案1】：

这是我最近项目的一个例子。我用一个 livewire 组件管理了这个。在 Livewire 组件中；

public $entries = [];
public $date;

public function mount()
{
   $this->date = now()->format('Y-m-d');

   $this->entries=[
    [
     'name'=>'',
     'amount'=>'',
    ],
    [
     'name'=>'',
     'amount'=>'',
    ]
 }

现在，在edit.blade.php ;

<input type="date" wire:model="date">

@foreach($entries as $key=>$entry)
<div wire:key="{{'entry'.$key}}">
  <div>
   <input type="text" wire:model="entries.{{$key}}.name">
  </div>
  <div>
   <input type="number" wire:model="entries.{{$key}}.amount">
  </div>
</div>
@endforeach

现在，再次在 livewire 组件中进行保存；

public function save()
{
  foreach($this->entries as $entry){
    Transaction::create([
      'name'=>$entry['name'],
      'amount'=>$entry['amount']
    )];
  }
  //Notify User
}

但是，如果出于某种原因您需要两个 livewire 组件来管理同一个表单，您可以从一个组件发出并在另一个组件中侦听。例如在发光元件中；

public function save(){
   $this->emit('entryMade', $amount);
}

现在在监听组件中；

protected $listeners = ['entryMade'];

public function entryMade($amount)
{
  // Do anything with $amount
}

【讨论】：