如何向Livewire模态框传递用户数据？为何读取属性报错？

问题原因 #

1. 组件初始化时$user为null：ShowModal组件加载时$idmodal未赋值，User::find(null)返回null，视图直接访问$user->name触发报错。
2. emit事件后组件未重新查询用户：点击按钮更新$idmodal后，组件的render方法不会自动执行，$user仍为初始化时的null值。
3. Bootstrap与Livewire事件顺序冲突：按钮同时使用data-bs-toggle和wire:click，模态框可能先于Livewire的emit事件显示，此时$user还未加载。

解决方案 #

方案1：添加null判断避免直接访问属性 #

修改模态框视图，先验证$user存在再访问属性：

@if($user)
    <input type="text" class="form-control" value="{{$user->name}}" aria-label="email" wire:model="name">
@endif

方案2：在监听方法中查询用户并触发组件刷新 #

将用户查询逻辑移到监听方法，主动触发组件更新：

protected $listeners = ['OpenModal'];
public $idmodal;
public $user;

public function OpenModal($id)
{
    $this->idmodal = $id;
    $this->user = User::find($id);
    // 触发组件重新渲染
    $this->emitSelf('$refresh');
}

public function render()
{
    return view('livewire.show-modal')
        ->layout('livewire.base');
}

视图中直接使用组件的$user属性（仍需保留null判断）：

@if($user)
    <input type="text" class="form-control" value="{{$user->name}}" aria-label="email" wire:model="name">
@endif

方案3：用Livewire控制模态框显示，避免Bootstrap事件冲突 #

移除Bootstrap的模态框自动触发逻辑，改用Livewire属性控制显示：

1. 更新ShowModal组件：

protected $listeners = ['OpenModal'];
public $user;
public $showModal = false;

public function OpenModal($id)
{
    $this->user = User::find($id);
    $this->showModal = true;
}

public function render()
{
    return view('livewire.show-modal')
        ->layout('livewire.base');
}

2. 修改模态框视图：

<div class="modal fade" id="inputFormModal" tabindex="-1" aria-labelledby="inputFormModalLabel" aria-hidden="{{ !$showModal }}" style="{{ $showModal ? 'display: block;' : '' }}">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="inputFormModalLabel">用户详情</h5>
                <button type="button" class="btn-close" wire:click="$set('showModal', false)" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                @if($user)
                    <input type="text" class="form-control" value="{{$user->name}}" aria-label="email" wire:model="name">
                @endif
            </div>
        </div>
    </div>
</div>

3. 更新按钮代码：

<button type="button" wire:click="OpenModal({{$usuario->id}})"> Open User</button>
@livewire('show-modal')

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