Alpine.js中$dispatch()事件被触发两次的问题求助

问题根源 #

1. 事件重复触发：$dispatch触发两次__dispatch请求，通常是事件冒泡导致Livewire和Alpine同时捕获事件，或组件被重复渲染生成多个Alpine实例。
2. 私有状态丢失：$wire.call会触发组件重新渲染重置私有变量；未指定目标的Livewire.dispatch会创建新组件实例，导致原有状态无法继承。

解决步骤 #

1. 修复事件重复触发 #

方法一：阻止事件冒泡

在Alpine点击事件上添加.stop修饰符，避免事件向上冒泡被重复捕获：

<div class="tile" :id="'tile-' + index" x-on:click.stop="animate(index)"></div>

方法二：指定Livewire事件目标

使用Livewire.dispatch时明确指定目标为当前组件实例，避免创建新实例：

animate(key) {
    Livewire.dispatch('showMe', { info: key }, { target: '@this' });
}

方法三：检查组件重复渲染

排查Blade模板，确保<div class="tile-container">未被循环、条件渲染重复输出，避免生成多个Alpine实例。

2. 保留私有变量状态 #

要维持私有状态，必须确保操作的是同一个Livewire组件实例：

• 在Livewire组件中定义私有变量，通过事件监听方法直接修改（无需触发全局渲染）：

<?php

namespace App\Livewire;

use Livewire\Component;

class TileComponent extends Component
{
    // 私有状态变量，仅当前实例可访问
    private array $privateState = [];

    public function mount()
    {
        // 初始化私有状态
        $this->privateState['currentTile'] = null;
    }

    // 监听Alpine触发的showMe事件
    #[On('showMe')]
    public function handleTileClick($info)
    {
        // 更新私有状态，状态会保留在当前实例中
        $this->privateState['currentTile'] = $info;
    }

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

最终完整代码示例 #

Blade/Alpine代码：

<div class="tile-container" x-data="{
    tiles: Array(28).fill().map((_, idx) => idx),
  
    animate(key) {
        Livewire.dispatch('showMe', { info: key }, { target: '@this' });
    }
}">

<template x-for="(tile, index) in tiles" :key="index">
    <div class="tile" :id="'tile-' + index" x-on:click.stop="animate(index)"></div>
</template>

</div>

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