嵌套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开始。因此，当你在

中编写这个代码时

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

$item->id的值可以是eg。200，但是数组没有索引200，那么你循环数组索引，而不是模型id值

当你引用这个时:

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

的输出是这样的:

array: 3 [
0 => array:6[
"id" => 34
"name" => "First Name"
"email" => "[e-mail]"
//...
]
1 => array:6[
"id" => 47
"name" => "Second Name"
"email" => "[e-mail]"
//...
]
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

，当然，就像Qirel说的，你应该把它包装在一个根元素中，并添加: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