在Laravel Livewire中如何根据一个输入框的值设置另一个输入框的值

第一步：在Livewire组件中声明绑定属性 #

你需要先在组件类中定义两个公共属性，和两个输入框做双向绑定，同时补充计算逻辑的异常判断避免除以0报错：

// Livewire 组件类
class YourComponent extends Component
{
    // 声明和输入框绑定的公共属性
    public float $rate = 0;
    public float $reverse_rate = 0;

    public function reverse()
    {
        // 避免输入0时出现除以0的错误
        if ($this->rate > 0) {
            $this->reverse_rate = floatval(1 / $this->rate);
        } else {
            $this->reverse_rate = 0;
        }
    }
}

第二步：修改视图输入框的绑定配置 #

给两个输入框加上wire:model属性和组件的公共属性绑定，同时修正原代码中倒数输入框type属性缺失闭合引号的问题：

<!-- Rate 输入框 -->
<x-input-group 
    type="number" 
    min="0"  
    step="0.0001"
    wire:model.lazy="rate"
    wire:focusout="reverse"
/>

<!-- 倒数输入框 -->
<x-input-group 
    type="number" 
    min="0" 
    step="0.0001"
    wire:model="reverse_rate"
/>

可选优化方案 #

如果不需要等到失焦才计算，想要rate输入变化后实时计算倒数，可以去掉手动绑定的wire:focusout事件，用Livewire自带的属性更新生命周期钩子自动触发计算：
组件代码修改为：

public float $rate = 0;
public float $reverse_rate = 0;

// rate属性更新时自动触发该方法
public function updatedRate()
{
    $this->reverse_rate = $this->rate > 0 ? floatval(1 / $this->rate) : 0;
}

对应视图的rate输入框简化为：

<x-input-group 
    type="number" 
    min="0"  
    step="0.0001"
    wire:model.live="rate"
/>

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