Livewire如何将输入框变更后的值传递给组件update方法

问题根因 #

你在wire:change里传入的第三个参数{{ $row->rate }}是Blade模板初始渲染时就固定在页面上的静态旧值，不会随用户输入更新，所以无论输入什么内容，触发事件时传给后端的永远是页面加载时的初始值。后端存完旧值重新渲染组件，又把旧值写回输入框，就出现了值被重置的现象。

可行修复方案 #

方案1：数组模型绑定（推荐，适配多行场景最稳定） #

利用Livewire的数组绑定能力，直接将输入框和组件公共属性$quoteItems做双向绑定，不需要硬编码传值，从根源避免拿到旧值的问题：

1. 调整输入框代码，去掉硬编码的value传参，增加wire:model绑定：

<input
    wire:change="update({{ $row->id }}, 'rate')"
    wire:model="quoteItems.{{ $loop->index }}.rate"
    name="quote_{{ $row->id }}_rate"
    class="w-full"
    type="text"
/>

2. 调整后端update方法，直接从绑定的属性中读取最新输入值：

public function update( $id, $type ) {
    // 定位对应条目的最新输入值
    $targetItem = $this->quoteItems->firstWhere('id', $id);
    $newValue = $targetItem->{$type};

    $item = QuoteItem::find( $id );
    $item->{$type} = $newValue;
    $item->total = $item->hours * $item->rate;
    $item->save();

    $this->quoteItems = QuoteItem::where( 'quote_id', $this->number )->get();
    $this->refreshTotals();
}

优化提示：如果需要输入实时同步而非失焦才触发，可以给wire:model添加.lazy或.debounce.500ms修饰符，平衡交互体验和请求频率。

方案2：原生事件取值快速修复（无需调整绑定逻辑） #

如果不想改动现有绑定结构，可以直接通过JS事件对象读取输入框的最新值，替换硬编码的旧值参数，后端代码不需要做任何调整：

<input
    wire:change="update({{ $row->id }}, 'rate', $event.target.value)"
    name="quote_{{ $row->id }}_rate"
    class="w-full"
    type="text"
    value="{{ $row->rate }}"
/>

注意：该方案需要确保组件重渲染时返回的输入框value是最新持久化的值，否则仍可能出现输入内容被旧值覆盖的问题。

关于拆分独立子组件的方案对比 #

两种方案没有绝对的优劣，根据业务场景选择即可：

• 拆分单行子组件的优势：单行逻辑独立内聚，单个输入框更新只会触发当前行组件重渲染，大表格场景下性能明显优于单组件全量重渲染，后续维护单行交互（比如删除行、选品、折扣计算）时不需要在大组件代码里找逻辑
• 拆分单行子组件的劣势：表格行数过多（百行以上）时，初始化大量子组件会增加首屏加载开销；父子组件间同步总额、全局状态需要额外做事件派发，代码量比单组件方案稍高
• 选择标准：如果单行内交互逻辑超过3种，优先拆子组件；如果只是简单的费率、工时输入算总额，单组件用数组绑定已经足够轻量高效，不需要强行拆分。

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