Laravel 8+Livewire项目点击表格行添加table-info类后丢失问题求解

问题原因 #

你遇到的高亮消失问题本质是Livewire的DOM重绘机制导致的：
你在表格行同时绑定了wire:click和原生onclick事件，点击时原生JS先执行给行加上了table-info类，但随后wire:click会触发Livewire向服务端发送请求，请求返回后Livewire会重绘组件对应DOM，你通过原生JS临时添加的类没有被记录在组件渲染逻辑中，重绘后就会丢失。

推荐解决方案（状态驱动，符合Livewire设计规范） #

不用依赖原生JS操作DOM，直接用Livewire的组件状态管理选中状态即可：

1. 首先修改你的TablePraticheContent Livewire组件PHP类：

// 新增公共属性存储选中行ID
public $selectedId = null;

// 修改clickPartiteTrigger方法
public function clickPartiteTrigger($id)
{
    // 切换选中逻辑：如果点击的是已选中的行就取消选中，否则更新选中ID
    $this->selectedId = $this->selectedId == $id ? null : $id;
    
    // 此处保留你原来加载详情的业务逻辑
}

2. 然后修改table-pratiche-content.blade.php里的tr标签：
   删除原来的onclick="toggleClass(this, 'table-info')"属性，改为动态绑定class：

<tr 
    wire:click="clickPartiteTrigger({{ $p['id_minuta'] }})"
    class="{{ $selectedId == $p['id_minuta'] ? 'table-info' : '' }}"
>

3. 直接删除原来的toggleClass JS函数即可，不再需要。

可选方案（保留JS操作的情况） #

如果你一定要用JS修改类的方式，可以监听Livewire的组件渲染完成事件，重绘后重新给选中行加类：

// 放到custom_scripts区块中
document.addEventListener('livewire:load', function () {
    let selectedRowId = null;
    window.toggleClass = function(el, className, id) {
        selectedRowId = el.classList.contains(className) ? null : id;
        el.classList.toggle(className);
    }
    // 每次Livewire重绘完成后重新补全高亮
    Livewire.hook('message.processed', (message, component) => {
        if(selectedRowId) {
            const row = document.querySelector(`tr[data-id="${selectedRowId}"]`);
            row && row.classList.add('table-info');
        }
    });
});

对应的tr标签补充data-id属性：

<tr 
    wire:click="clickPartiteTrigger({{ $p['id_minuta'] }})" 
    onclick="toggleClass(this, 'table-info', {{ $p['id_minuta'] }})"
    data-id="{{ $p['id_minuta'] }}"
>

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