Laravel Livewire 多行列下拉联动更新交易分类实现问题

问题根因 #

你遇到的多行场景下无法识别触发行的问题，核心是两个错误：

• 渲染嵌套组件时使用了重复的key值，Livewire无法区分不同行的独立组件实例
• 组件内属性命名冲突，绑定逻辑、语法存在错误

修复步骤 #

1. 调整主视图组件渲染逻辑 #

循环渲染多行交易记录时，必须给每个子组件设置全局唯一的key值，建议关联对应交易行的唯一ID，示例如下：

{{-- 假设你循环的是交易记录列表$transactions --}}
@foreach($transactions as $transaction)
<tr>
    {{-- 其他交易字段渲染逻辑 --}}
    @livewire('transaction-category', ['transactionId' => $transaction->id], key('tx-category-'.$transaction->id))
</tr>
@endforeach

2. 修正Livewire组件代码 #

修正属性重名问题，删除调试用的dd语句，优化联动逻辑：

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Category;

class TransactionCategory extends Component
{
    // 接收当前交易行ID，用于后续数据保存关联
    public $transactionId;
    // 选中的大类值
    public $selectedType;
    // 选中的子类值
    public $selectedSubclass;
    // 大类选项列表
    public $typeOptions;
    // 子类选项列表
    public $subclassOptions = [];
    
    public function mount($transactionId)
    {
        $this->transactionId = $transactionId;
        // 初始化大类选项
        $this->typeOptions = Category::select('type')->groupBy('type')->get();
    }

    // 监听大类变化，更新子类选项
    public function updatedSelectedType()
    {
        $this->subclassOptions = Category::subs($this->selectedType);
        // 切换大类时清空已选子类
        $this->selectedSubclass = null;
    }

    public function render()
    {           
        return view('livewire.transaction-category');     
    }  
}

3. 修正组件模板代码 #

修复@if语法错误，调整绑定字段对应关系：

<div>
    <td class="border">
        <select wire:model="selectedType" class="inv_select">
            <option value="">选择分类大类</option>
            @foreach($typeOptions as $t)
                <option value="{{ $t->type }}">{{ $t->type }}</option>
            @endforeach
        </select>
    </td>
    @if(count($subclassOptions) > 0)
    <td>
        <select wire:model="selectedSubclass" class="inv_select">
            <option value="">选择具体分类</option>
            @foreach($subclassOptions as $s)
                <option value="{{ $s->type }}">{{ $s->type }}</option>
            @endforeach
        </select>
    </td>
    @endif
</div>

效果说明 #

修改后每个交易行的分类组件都是独立实例，状态互不干扰，切换任意一行的大类下拉，只会触发当前行的子类下拉更新，不会影响其他行。后续需要保存分类时，可以在组件内新增保存方法，通过$this->transactionId找到对应交易行更新字段即可。

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