livewire 3 如何使用表单存储foreach值

Question

你好，我是 Livewire 3 的新手，我在表单中有表格，数据表有表示是或否的单选按钮 选择“是”或“否”后，我将提交该表单，当时我想存储 id 和名称等获取详细信息。现在我正在获取单选按钮值，我来解决

表格页面 我的代码表

<div class="modal-body">
    <form wire:submit.prevent="Save" autocomplete="off">
      <div class="card card-bordered card-preview table-responsive ">
        <div class="card-inner "> 
          <table class="datatable  table   ">
            <thead>
              <tr>
                <th style=" border: 1px solid black; text-align: center;">SL</th>
                <th style=" border: 1px solid black; text-align: center;">ID No</th> 
                <th style=" border: 1px solid black; text-align: center;">NAME</th>
                <th style=" border: 1px solid black; text-align: center;">YES</th>
                <th style=" border: 1px solid black; text-align: center;">NO</th>
              </tr>
            </thead>
            <tbody> 
 @foreach ($UserDetail as $key=>$UserDetails) 
 @php $ID = 0+$key @endphp
<td style=" border: 1px solid black; text-align: center;">
                {{ $key + 1  }}
              </td> 
              <td style=" border: 1px solid black; text-align: center;">
                {{ $UserDetails->id }}
              </td>
              <td style=" border: 1px solid black; text-align: center;">
                {{ $UserDetails->name }}
              </td>
              <td style=" border: 1px solid black; text-align: center;">
                <div class="custom-control custom-control-md custom-radio ">
                  <input type="radio" wire:model="TableInput.{{$ID}}.data" class="custom-control-input" name="TableInputs[{{$ID}}]" id="sv2-preference-fedev{{$ID}}" value="YES" required>
                  <label class="custom-control-label" for="sv2-preference-fedev{{$ID}}"></label>
                </div>
              </td>
              <td style=" border: 1px solid black; text-align: center;">
                <div style="text-align: center;" class="custom-control custom-control-md custom radio"><input type="radio" wire:model="TableInput.{{$ID}}.data" class="custom-control-input" name="TableInputs[{{$ID}}]" id="sv2-preference-uxdis{{$ID}}" value="NO" required>
                  <label class="custom-control-label" for="sv2-preference-uxdis{{$ID}}"></label>
                </div>
              </td> 
              </tr> 
      @endforeach 
            </tbody>
          </table>
        </div>
      </div>
      <br>
      <div  >
        <button type="submit" class="btn btn-md btn-primary">SAVE  </button>
      </div>
    </form>
  </div>

控制器 StudentAttendance 类扩展了 Component {

public $name; 
public $id;  
public $TableInput = [];


public function mount()
{
  $this->User       = User::all();   
}

public function Save() 
{   
    $bel = Data::create([ 
         
        'Id'                     => $value['Id'],
        'name'                   => $value['name'],
        'data'                   => $value['data'],
    ]);
} 
} 

}

Answer 1

为了在单击 save 按钮时保存表格，您可以 借助数组在表单中创建表。您可以将集合转换为数组，如下所示：

$this->user = User::get()->toArray();

然后在您的刀片文件中，您可以将模型与输入字段绑定为：

@foreach ($user as $key => $value)
    <tr>
        <td>...</td>
        <td style=" border: 1px solid black; text-align: center;">
            <input type="text" wire:model="user.{{ $key }}.first_name">
        </td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
@endforeach

通过这种方式，您可以在 save() 方法中迭代用户数组来保存数据：

public function save()
{
    ...
    ...
    foreach ($this->user  as $key => $value) {
        $bel = Data::create($value);
    }
    ...

}

您还可以根据您的用例使用批处理插入/更新。