Livewire/Bootstrap - 在显示 Livewire/Bootstrap 模态之前向输入传递值问题

Question

我有两个不同的按钮应该触发模式的打开（$('#create-ponto-atipico').modal('show');）。根据单击的按钮，我需要将不同的值传递到模式中的输入字段。

附加信息：

我正在使用 Bootstrap 3.4、Laravel 7 和 PHP 7.4 以及 Livewire 2.12。 如果需要，我可以提供更多详细信息。 我正在使用 Laravel 框架开发一个 PHP 项目，其中我使用 Livewire 来编写我的组件。在我的应用程序的特定视图中，我有一个使用以下代码调用的 Livewire 组件：

@livewire('create-ponto-atipico')
@livewireScripts

但是，在显示特定值之前，我无法将特定值传递到 Livewire 模式中的输入字段。

create-ponto-atipico.view
<div class="modal fade" id="create-ponto-atipico" tabindex="-1" aria-labelledby="create-ponto-atipico" aria-hidden="true"
    wire:ignore.self>
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form wire:submit.prevent="save">
                {{-- TODO: PASSAR O TIPO DE INPUT PARA DENTRO DO CONTROLADOR --}}
                <input type="text" id="tipo_entrada_modal" wire:model="tipo_entrada" hidden>
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h5 class="modal-title fs-5" id="create-ponto-atipico">Selecionar data e horário</h5>
                </div>
                <div class="modal-body">
                    <div>
                        <fieldset>
                            <legend class="form-label ml-3">Data</legend>
                            <input type="text" class="form-control daterange" id="data_submissao"
                                wire:model.defer="data_submissao"
                                onchange="this.dispatchEvent(new InputEvent('input'))">
                        </fieldset>
                        @error('data_submissao')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="row mt-4">
                        <div class="col-md-4">
                            <fieldset>
                                <legend class="form-label ml-3">Manhã</legend>
                                <label for="entrada_manha" class="form-label">Entrada</label>
                                <input type="time" class="form-control" id="entrada_manha"
                                    wire:model.defer="entrada_manha">
                                @error('entrada_manha')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                                <label for="saida_manha" class="form-label">Saída</label>
                                <input type="time" class="form-control" id="saida_manha"
                                    wire:model.defer="saida_manha">
                                @error('saida_manha')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </fieldset>
                        </div>
                        <div class="col-md-4">
                            <fieldset>
                                <legend class="form-label ml-3">Tarde</legend>
                                <label for="entrada_tarde" class="form-label">Entrada</label>
                                <input type="time" class="form-control" id="entrada_tarde"
                                    wire:model.defer="entrada_tarde">
                                @error('entrada_tarde')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                                <label for="saida_tarde" class="form-label">Saída</label>
                                <input type="time" class="form-control" id="saida_tarde"
                                    wire:model.defer="saida_tarde">
                                @error('saida_tarde')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </fieldset>
                        </div>
                        <div class="col-md-4">
                            <fieldset>
                                <legend class="form-label ml-3">Noite</legend>
                                <label for="entrada_noite" class="form-label">Entrada</label>
                                <input type="time" class="form-control" id="entrada_noite"
                                    wire:model.defer="entrada_noite">
                                @error('entrada_noite')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                                <label for="saida_noite" class="form-label">Saída</label>
                                <input type="time" class="form-control" id="saida_noite"
                                    wire:model.defer="saida_noite">
                                @error('saida_noite')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </fieldset>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                    <button type="submit" class="btn btn-primary">Submeter</button>
                </div>
            </form>
        </div>
    </div>
</div>

class CreatePontoAtipico extends Component
{

    public $data_submissao = "";
    public $entrada_manha = "";
    public $saida_manha = "";
    public $entrada_tarde = "";
    public $saida_tarde = "";
    public $entrada_noite = "";
    public $saida_noite = "";
    public $tipo_entrada = "";

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

    public function save()
    {
        $this->validate([
            'data' => 'required',
        ]);

        //return to dashboard view
        $dia_hoje = Carbon::now();
        $mes_hoje = $dia_hoje->month;
        $ano_hoje = $dia_hoje->year;
        return redirect()->to('/dashboard/' . $ano_hoje . '/' . $mes_hoje);
    }
}

除了 tipo_entrada 之外，控制器中还有所有其他输入字段。

• 我尝试使用 Bootstrap show.bs.modal 事件在显示模态之前设置输入字段的值，但它不起作用。
• 还尝试使用 JavaScript 在显示模式之前设置输入字段的值，但没有成功。

$('#create-ponto-atipico').on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget);
    var tipo = button.data('tipo');
    var modal = $(this);
    modal.find('.modal-body #tipo_entrada_modal').val(tipo);
});

• 我尝试用 JS 设置#tipo_entrada_modal 没有效果

$("#tipo_entrada_modal").prop('value', 'trabalho');

• 我也尝试使用 Livewire.emit 它

window.livewire.emit('set:tipo_entrada', 'trabalho');

• 我尝试用 jquery 更新隐藏的输入

$('#tipo_entrada_modal').attr('value','trabalho');

模态中的输入值为“trabalho”，但是当我提交表单时，$tipo_entrada为空。

我希望有人能帮助我！

Answer 1

好吧，我找到了解决方案。也许我认为我可以更好地解释我想要实现的目标以及如何实现它。 我有一个刀片视图文件，其中包含两个按钮来添加工作日或缺勤日。 一开始，单击按钮将提交一个带有从该视图中选择的输入的 for。现在，我想添加一个模式来插入自定义工作日或缺勤日（如果视图中未选择任何输入）。 我为模态设计了一个 Livewire 组件，我可以打开模态。 我的第一个问题是阻止模式自动提交。通过wire:model.defer 实现了这一点。 第二个问题是：我无法区分哪个按钮触发了模式。我尝试了一切。 最终 JS 使用 Livewire.emit() 将其提交到模式，该 Livewire.emit() 将设置变量！