基于下拉选择的Livewire输入框自动填充实现求助

步骤1：修改Livewire组件代码 #

更新你的ItemForm组件，添加绑定属性和价格更新方法：

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\StoreItem;

class ItemForm extends Component
{
    // 绑定选中的蔬菜名称
    public $selectedVegetable = '';
    // 存储对应蔬菜的价格
    public $vegetablePrice = '';
    // 蔬菜列表数据
    public $Itemlist;

    // 组件初始化时加载蔬菜列表
    public function mount()
    {
        $this->Itemlist = StoreItem::get();
    }

    // 下拉选项变更时触发，更新价格
    public function updatePrice()
    {
        $selectedItem = StoreItem::where('vegetable_name', $this->selectedVegetable)->first();
        $this->vegetablePrice = $selectedItem ? $selectedItem->vegetable_price : '';
    }

    public function render()
    {
        return view('livewire.Item_Form');
    }
}

步骤2：更新视图代码 #

修改下拉框和输入框，添加Livewire的绑定和事件监听：

<div class="form-control-wrap">
    <select wire:model="selectedVegetable" wire:change="updatePrice" name="vegetable" required>
        <!-- 添加默认空选项，提升用户体验 -->
        <option value="">请选择蔬菜</option>
        @foreach ($Itemlist as $item) 
            <option value="{{ $item->vegetable_name }}">
                {{ ucfirst($item->vegetable_name) }}
            </option>
        @endforeach
    </select>
</div>

<!-- 绑定价格到输入框，设置readonly防止手动修改（可选） -->
<input type="text" name="vegetable_price" value="{{ $vegetablePrice }}" readonly>

关键说明 #

• wire:model="selectedVegetable"：将下拉框的选中值与组件的selectedVegetable属性双向绑定
• wire:change="updatePrice"：当下拉选项改变时，自动调用组件的updatePrice方法查询对应价格
• mount方法：在组件初始化时一次性加载蔬菜列表，避免每次渲染都查询数据库，优化性能
• 输入框的readonly属性：如果不需要用户手动修改价格，建议添加该属性保证数据一致性

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