Laravel 10中Livewire模态框数据传递报错的解决方法

错误根源 #

1. $locationData未初始化，默认值为null，模态框渲染时直接访问$locationData['lat']触发报错
2. $dispatch的参数格式不符合Livewire 3规范，数据传递逻辑错误
3. Livewire事件监听方法的参数接收逻辑不匹配传递的数据结构

修复步骤 #

1. 初始化Livewire组件的$locationData #

在MyComponent类中，将$locationData初始化为空数组，避免初始状态为null：

class MyComponent extends Component
{
    public $locationData = [];

    #[On('open-modal')]
    public function openModalData($params)
    {
        if ($params['name'] === 'show-location') {
            $this->locationData = [
                'lat' => $params['lat'],
                'lon' => $params['lon']
            ];
        }
    }
}

2. 修正按钮的wire:click事件触发格式 #

Livewire 3中$dispatch需以事件名+数据对象的格式传递参数，调整按钮代码确保数据正确传递：

<button wire:click="$dispatch('open-modal', { 
    name: 'show-location', 
    lat: @js($item->location->latitude), 
    lon: @js($item->location->longitude) 
})">
    <x-icon-o-map-pin class="h-4 w-4" />
</button>

使用@js语法可以安全地将PHP变量转换为JavaScript格式，避免语法错误。

3. 模态框添加空值判断，防止渲染报错 #

在模态框内容中先判断$locationData是否有数据，再渲染纬度/经度信息：

<x-modal name="show-location" :show="$errors->isNotEmpty()" focusable>
    @if(!empty($locationData))
        <p>Latitude: {{ $locationData['lat'] }}</p>
        <p>Longitude: {{ $locationData['lon'] }}</p>
    @endif
</x-modal>

4. 可选：让Livewire完全控制模态框显示 #

如果希望通过Livewire状态控制模态框显示，可以修改模态框的show属性绑定：

<x-modal name="show-location" :show="!empty($locationData)" focusable>
    @if(!empty($locationData))
        <p>Latitude: {{ $locationData['lat'] }}</p>
        <p>Longitude: {{ $locationData['lon'] }}</p>
    @endif
</x-modal>

同时在Livewire方法中保留触发前端模态框打开的逻辑：

#[On('open-modal')]
public function openModalData($params)
{
    if ($params['name'] === 'show-location') {
        $this->locationData = [
            'lat' => $params['lat'],
            'lon' => $params['lon']
        ];
        $this->dispatch('open-modal', 'show-location');
    }
}

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