Livewire 3中wire:click触发事件后文本修改随即回滚问题求助

点击wire:click按钮后，Livewire会发起后端请求执行change方法，随后组件会重新渲染整个模板。你通过JS修改的文本会被模板里原始的Old Text覆盖，所以出现短暂显示后恢复的现象。

有两种常用修复方式，选适合你的即可：

方式一：用Livewire属性绑定（推荐） #

这是最符合Livewire数据驱动思想的做法，不需要手动操作DOM：

修改组件代码 #

class YourComponent extends Component
{
    public $text = 'Old Text'; // 添加属性存储文本

    public function change($clientId)
    {
        // 直接修改属性，Livewire会自动更新DOM
        $this->text = 'New Text';
        // 如果需要保留dispatch事件，也可以继续写
        // $this->dispatch('changeText', $clientId);
    }

    public function render()
    {
        return view('livewire.your-component');
    }
}

修改模板代码 #

<h1 id="target-text">{{ $text }}</h1>

<button wire:click="change({{ $client->id }})">Press</button>

<!-- 不需要原来的@script块，除非你还有其他JS逻辑要处理 -->

方式二：阻止组件重渲染（适合必须用JS的场景） #

如果一定要通过JS事件修改DOM，让change方法执行后不触发组件重渲染，在Livewire 3中可以使用->withoutRender()方法：

修改组件代码 #

public function change($clientId)
{
    $this->dispatch('changeText', $clientId)->withoutRender();
}

模板代码保持不变 #

这样组件不会重新渲染，JS修改的文本就不会被覆盖。

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