使用Livewire删除动态行时仅移除数据，UI输入框未消失问题

问题核心 #

你遇到的情况是数据已从数组中移除，但视图里的输入框没跟着消失，本质是视图渲染没有和order_details数组的变化同步。Livewire的UI更新依赖数据的响应式绑定，若视图循环时key设置不对或数组索引不连续，就会出现这种数据和UI脱节的问题。

具体解决步骤 #

• 给循环项添加唯一wire:key
  在Blade视图循环order_details时，必须为每个行元素设置和数组索引绑定的wire:key，让Livewire能准确识别要移除的DOM节点：

  @foreach($createChallanRequest['order_details'] as $index => $detail)
      <div wire:key="order-detail-{{ $index }}">
          <input type="text" wire:model="createChallanRequest.order_details.{{ $index }}.product_name">
          <button wire:click="removeRow({{ $index }})">删除</button>
      </div>
  @endforeach
  

  注意wire:key的值要唯一，这里用order-detail-{{ $index }}绑定数组索引，确保数组变化时，Livewire能对应更新DOM。

• 优化删除方法，确保数组索引连续
  原方法用array_splice虽能删除数据，但有时会导致数组索引不连续，影响视图同步。改成以下写法，删除后重新整理数组索引：

  public function removeRow($index)
  {
      unset($this->createChallanRequest['order_details'][$index]);
      // 重新索引数组，让索引连续
      $this->createChallanRequest['order_details'] = array_values($this->createChallanRequest['order_details']);
  }
  

  这样处理后，数组索引会变成连续的0、1、2...，视图循环时不会出现空索引，Livewire能正确触发UI更新。

• 检查基础响应式配置
  确保createChallanRequest是组件的公开属性（public），Livewire只能监听公开属性的变化；如果是嵌套数组，修改后无需额外触发更新，只要正确修改属性值即可。

内容的提问来源于stack exchange，提问作者Ronak Jain