Blade模板特定代码后wire:click指令无法触发Livewire函数问题

算力阿峰

2026-6-29

问题原因及解决方案

核心问题是HTML结构不合法：<tr>标签只能嵌套在<table>、<thead>、<tbody>或<tfoot>这类表格相关容器中，直接把<tr>放在<div>里会导致浏览器自动修正DOM结构，破坏Livewire的事件绑定逻辑，进而让wire:click无法触发add方法。

修复步骤

重构HTML结构，将表格元素放入合法的<table>容器内
确保wire:click所在的按钮处于有效的DOM层级中

修正后的代码示例

Blade组件代码

<div>
    <table>
        <tbody>
            <tr class="text-center border-top">
                <td rowspan="4">{{ $product_name }}</td>
            </tr>
        </tbody>
    </table>
    <button wire:click='add'> add</button>
    {{ $count }}
    <!-- Some code here -->
</div>

Livewire组件代码

public $count = 0;
public $product_name; // 确保该属性已定义或初始化

public function add()
{
    $this->count++;
    \Illuminate\Support\Facades\Log::info('Count incremented. New count: ' . $this->count);
}