嵌套 Livewire 组件在更新时重置值

Question

我正在尝试更新嵌套数组中 Livewire 组件上的数据，但它们没有像我希望的那样运行。我正在尝试利用多维数组来管理多个输入的数据，如下所示。

@foreach ($items as $item)
   <input wire:model="items.{{ $item->id }}.employee_id" type="text">
   <input wire:model="items.{{ $item->id }}.name" type="text">
@endforeach

我运行在向这些输入中输入数据时遇到了问题。它将更新一个值（例如 items.3.name）并将多维数组中的所有其他数据重置回其原始值。

阅读 Livewire 要求后，我尝试更改页面上的规则，但这没有帮助。这是我的控制器的片段：

public $items = [];
protected $rules = [
    'items.*.employee_id' => 'required',
    'items.*.name' => 'required',
];

public function mount() {
    $this->items = Employees::all()->toArray();
}

public function render() {
    return view('livewire.employees');
}

public function updatedName() {
    dd($this->items);
}

据我所知，这应该有效。我错过了什么？

Answer 1

如果 $items 是一个数组，您应该知道数组索引从 0 开始。因此，当您在 blade

中编写此代码时

<input wire:model="items.{{ $item->id }}.employee_id" type="text">

$item->id 值可以是例如。 200，但数组没有索引 200，那么你将遍历数组索引，而不是遍历模型 ID 值

当您引用此内容时：

$this->items = User::all()->toArray();

输出是这样的：

array: 3 [
 0 => array:6[
   "id" => 34
   "name" => "First Name"
   "email" => "firstname@email.com"
   //...
 ]
 1 => array:6[
   "id" => 47
   "name" => "Second Name"
   "email" => "secondname@email.com"
   //...
 ]
 2 => array:6[] 
]

我认为正确的循环方式是：

@foreach($items as $key => $item)
  <input wire:model="items.{{ $key }}.name" type="text">
  <input wire:model="items.{{ $key }}.email" type="email">
@endforeach

当然，就像 Quirel 所说的那样，您应该将其包装在根元素中并添加 wire:key 指令

@foreach($items as $key => $item)
  <div wire:key="input-group-{{ $key }}">
    <input wire:model="items.{{ $key }}.name" type="text">
    <input wire:model="items.{{ $key }}.email" type="email">
  </div>
@endforeach

嵌套 Livewire 组件在更新时重置值

Nesting Livewire components resetting values on update

php

multidimensional-array

laravel

laravel-livewire