Livewire组件中Foreach仅传递最后一个元素至子组件问题

问题根源 #

你当前的实现里，所有循环生成的模态框都绑定了同一个showModal变量。点击任意课程卡片时，所有模态框都会被触发显示，但因为DOM渲染顺序，最后一个模态框会覆盖前面的所有模态框，所以看起来始终只显示最后一门课程的信息。

解决方案：通过Livewire状态控制单模态框显示 #

1. 父组件修改

首先在Livewire父组件类中添加记录选中课程ID的属性：

public $selectedCourseId = null;

然后修改模板循环部分，将点击事件改为设置选中课程ID，并给子组件传递显示判断条件：

@foreach($this->courses as $course)
    <a @click='$wire.set("selectedCourseId", {{ $course->id }})' id="{{$course->id}}">
        <div class="px-8 py-6">
            <h2 class="text-base font-bold flex items-center mt-3">
                {{ $course->title }}
            </h2>
            <div class="">
                <div class="flex items-center">
                    {{ $course->desc }}
                </div>
            </div>                           
        </div>                          
    </a>               
    <x-sections.course-modal :course="$course" :show="$selectedCourseId === $course->id"/>       
@endforeach  

2. 子组件修改

更新course-modal子组件，接收show参数并控制模态框显示：

<div id="{{$course->id}}" class="" x-cloak x-show="{{ $show }}">            
    <div class="px-14 pb-6">
        <h2 class="">
            {{ $course->title }}
        </h2>                       
    </div>
    <!-- 添加关闭按钮重置选中状态 -->
    <button @click='$wire.set("selectedCourseId", null)'>关闭</button>
</div>

替代方案：使用独立Alpine状态变量 #

如果不想依赖Livewire状态，也可以给每个模态框分配独立的Alpine状态：

父组件循环修改

@foreach($this->courses as $course)
    @php $modalKey = 'modal_' . $course->id; @endphp
    <a @click="window.{{ $modalKey }}.show = true" id="{{$course->id}}">
        <!-- 卡片内容保持不变 -->
    </a>               
    <x-sections.course-modal :course="$course" :modal-key="$modalKey"/>       
@endforeach  

子组件修改

<div id="{{$course->id}}" class="" x-cloak x-data="{ show: false }" x-show="show">            
    <div class="px-14 pb-6">
        <h2 class="">
            {{ $course->title }}
        </h2>                       
    </div>
    <button @click="show = false">关闭</button>
</div>
<script>
    window.{{ $modalKey }} = document.querySelector('#{{$course->id}}').__x;
</script>

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