Laravel Livewire组件点击事件仅首个引入组件生效问题求助

问题根源 #

你的Livewire组件视图存在多个根DOM元素，而Livewire强制要求每个组件必须有且仅有一个根元素。当你直接在组件视图里写两个@include时，最终渲染出的DOM会有两个独立的根div（#header和#body），Livewire的JS只会绑定第一个根元素内的wire指令事件，第二个根元素里的点击事件自然无法被监听。

修复方案 #

把两个@include包裹到一个单一的根元素中就行，比如用一个div套起来：

<div>
    @include('components.header')
    @include('components.body')
</div>

这样Livewire就能正确识别组件的根容器，不管你怎么调整include的顺序，两个视图里的按钮都能正常触发increment方法。

内容的提问来源于stack exchange，提问作者アリ・ナディム