Livewire/Bootstrap模态框显示前传递值至输入框失败问题

问题根源 #

直接通过JS/jQuery修改绑定了wire:model的DOM元素value，只会更新前端显示，但不会同步Livewire组件的内部状态。Livewire提交表单时依赖自身维护的组件状态而非DOM当前值，导致后端接收到null。

解决方案一：直接用Livewire方法设置属性（推荐） #

无需额外JS，通过wire:click调用组件方法直接赋值，同时触发模态框：

按钮代码：

<button wire:click="setTipoEntrada('entrada')" data-toggle="modal" data-target="#create-ponto-atipico">标记异常签到</button>
<button wire:click="setTipoEntrada('saida')" data-toggle="modal" data-target="#create-ponto-atipico">标记异常签退</button>

Livewire组件代码：

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class PontoAtipico extends Component
{
    public $tipo_entrada;

    // 其他表单字段...

    public function setTipoEntrada($valor)
    {
        $this->tipo_entrada = $valor;
        // 可选：重置表单验证状态，避免旧错误提示残留
        $this->resetValidation();
    }

    public function submitForm()
    {
        // 此时$this->tipo_entrada已正确赋值
        dd($this->tipo_entrada);
        // 后续逻辑...
    }

    public function render()
    {
        return view('livewire.ponto-atipico');
    }
}

模态框内隐藏输入：

<input type="hidden" wire:model="tipo_entrada">

解决方案二：用Livewire JS API同步状态 #

如果必须通过JS控制模态框，使用Livewire官方提供的@this.set()方法更新组件状态：

按钮代码：

<button onclick="openModalWithTipo('entrada')">标记异常签到</button>
<button onclick="openModalWithTipo('saida')">标记异常签退</button>

JS函数：

function openModalWithTipo(valor) {
    // 通过Livewire API更新组件属性，同步内部状态
    @this.set('tipo_entrada', valor);
    // 触发Bootstrap模态框
    $('#create-ponto-atipico').modal('show');
}

模态框隐藏输入保持不变：

<input type="hidden" wire:model="tipo_entrada">

关键注意点 #

• 禁止直接修改wire:model绑定元素的DOM值，必须通过Livewire组件方法或官方JS API更新状态；
• 触发模态框前务必完成属性赋值，避免组件状态未同步就渲染模态框。

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