如何避免简单输入计算触发Livewire请求，同时保留输入与组件的绑定

你的需求可以通过 wire:model.defer 修饰符 + JS修改值后手动触发input事件实现，全程不会触发多余的Livewire请求，提交时属性也能正常同步。

步骤1：修改绑定修饰符 #

把所有输入框的wire:model换成wire:model.defer，这个修饰符会让Livewire不在输入时发送同步请求，所有值的变更只会在提交表单时一次性传递给后端组件，完全满足你避免频繁请求的需求。

修改后的输入框示例代码：

<input id="cash-price"
       type="text"
       wire:model.defer="total_cache_price"
       class="amount-credit">

<input id="deposit"
       type="text"
       wire:model.defer="deposit"
       class="amount-credit">

<input id="trade-in"
       type="text"
       wire:model.defer="trade_in"
       class="amount-credit">

<!-- 提交按钮正常绑定Livewire的提交逻辑即可 -->
<button wire:click="save">提交表单</button>

步骤2：JS计算后手动触发input事件 #

你之前提交后属性为空的核心原因是：直接通过JS修改输入框的value属性，不会触发原生的input事件，Livewire的绑定逻辑依赖这个事件感知值的变化，所以不会把你JS修改后的值同步到内部维护的属性中。
你只需要在JS修改完输入框值后，额外加一行触发事件的代码即可，示例计算逻辑：

// 按需绑定计算触发时机，比如输入框失焦时计算
document.querySelectorAll('.amount-credit').forEach(input => {
  input.addEventListener('blur', () => {
    // 你的计算逻辑
    const cashPrice = parseFloat(document.querySelector('#cash-price').value) || 0;
    const tradeIn = parseFloat(document.querySelector('#trade-in').value) || 0;
    // 举个例子：计算首付为扣除置换价后金额的20%
    const calculatedDeposit = (cashPrice - tradeIn) * 0.2;
    
    // 更新输入框值
    const depositInput = document.querySelector('#deposit');
    depositInput.value = calculatedDeposit.toFixed(2);
    // 关键：触发input事件通知Livewire值已变更
    depositInput.dispatchEvent(new Event('input'));
  })
})

补充说明 #

如果有特殊场景不想用wire:model.defer，也可以在提交前通过Livewire暴露的JS API手动赋值，第三个参数传true表示延迟到提交时同步：

// 直接给Livewire组件属性赋值，第三个参数true开启延迟同步
@this.set('deposit', calculatedDeposit, true);

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