Laravel Livewire 下拉选择prod_name后自动填充prod_code实现方案

首先修正你现有代码的笔误：foreach 遍历的单条变量是$product，你的代码中误写为$products，会导致数据输出异常，修正后可按以下两种方案实现需求： #

方案1：Livewire 后端响应实现（适配你当前的技术栈） #

你用了wire:model说明是 Laravel Livewire 技术栈，用自带的属性更新钩子实现最简便：

1. 调整前端模板代码 #

<!-- 产品下拉选择框，用wire:model.live监听值变化实时触发后端逻辑 -->
<select wire:model.live="selected_prod_id">
    <option value="">请选择产品</option>
    @foreach($products as $product)
    <option value="{{ $product->id }}">{{ $product->prod_name }}</option>
    @endforeach
</select>

<!-- 产品编码自动填充输入框 -->
<input type="text" wire:model="prod_code" placeholder="产品编码" />

如果你坚持要用产品名称作为选中值，可将value改为{{ $product->prod_name }}，需确保产品名称无重复，避免查询错误。

2. 调整Livewire组件类逻辑 #

<?php

namespace App\Livewire;

use App\Models\Product;
use Livewire\Component;

class YourComponent extends Component
{
    // 定义公共属性
    public $selected_prod_id;
    public $prod_code;
    public $products;

    // 页面初始化时加载产品列表
    public function mount()
    {
        $this->products = Product::select('id', 'prod_name', 'prod_code')->get();
    }

    // Livewire自带的更新钩子，selected_prod_id变化时自动触发
    public function updatedSelectedProdId($value)
    {
        if (empty($value)) {
            $this->prod_code = '';
            return;
        }
        $product = Product::find($value);
        // 如果用产品名称作为选中值，查询语句改为：$product = Product::where('prod_name', $value)->first();
        $this->prod_code = $product?->prod_code ?? '';
    }

    public function render()
    {
        return view('livewire.your-component');
    }
}

方案2：纯前端实现（无后端请求，性能更高） #

如果不需要实时校验后端数据，直接把产品编码存在标签自定义属性里，用JS监听变化赋值即可：

<select id="prod_select">
    <option value="">请选择产品</option>
    @foreach($products as $product)
    <option value="{{ $product->prod_name }}" data-prod-code="{{ $product->prod_code }}">{{ $product->prod_name }}</option>
    @endforeach
</select>
<input type="text" id="prod_code_input" placeholder="产品编码" />

<script>
document.querySelector('#prod_select').addEventListener('change', function() {
    const selectedOpt = this.options[this.selectedIndex];
    document.querySelector('#prod_code_input').value = selectedOpt.dataset.prodCode || '';
})
</script>

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