Laravel Livewire技术问题：如何根据首个输入框值更新第二个文本框

问题根源 #

• 第一个输入框未通过wire:model绑定组件的$prefix属性，导致testing方法无法获取用户输入的内容。
• 第二个输入框同时使用wire:model和value属性，二者存在冲突；且未添加readonly属性实现只读效果。

修正后的Blade模板 #

<div class="mb-3">
    <label for="prefix" class="form-label">prefix</label>
    <input wire:model.lazy="prefix"
           wire:change="testing"
           type="text"
           class="form-control"
           id="prefix"
           name="prefix"
    />
</div>
<div class="mb-3">
    <label for="part" class="form-label">Code</label>
    <input wire:model="part"
           type="text"
           class="form-control"
           id="part"
           name="part"
           readonly
    />
</div>

修正说明 #

1. 给第一个输入框加上wire:model.lazy="prefix"（.lazy修饰符会在输入框失去焦点时同步数据，减少请求次数；若要实时同步可去掉.lazy），这样组件的$prefix属性能正确获取用户输入值。
2. 移除第二个输入框的value="{{ $part }}"，因为wire:model会自动渲染$part的值，手动添加value会造成冲突。
3. 添加readonly属性，让第二个输入框变为只读状态。

修正后的Livewire类 #

class DoSomethingClass extends Component
{
    public $prefix;
    public $part;

    public function testing()
    {
        $this->part = $this->prefix;
    }

    public function render()
    {
        return view('livewire.blade-template');
    }
}

额外优化（实时同步） #

如果想要第一个输入框的内容实时同步到第二个，无需等待失去焦点，可以去掉第一个输入框的wire:change="testing"，并在组件中添加属性变化监听：

class DoSomethingClass extends Component
{
    public $prefix;
    public $part;

    // 监听prefix属性变化，自动更新part
    public function updatedPrefix($value)
    {
        $this->part = $value;
    }

    public function render()
    {
        return view('livewire.blade-template');
    }
}

此时第一个输入框只需保留wire:model="prefix"即可，无需wire:change绑定。

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