使用 Laravel Livewire 传递隐藏的表单输入答案

【问题标题】：Passing hidden form inputs with Laravel Livewire使用 Laravel Livewire 传递隐藏的表单输入
【发布时间】：2021-02-15 18:41:36
【问题描述】：

我遇到了一个问题，当用户在图像上的裁剪工具周围移动时，我正在使用 JavaScript 填充两个隐藏的输入字段。隐藏的输入正在填充图像将被裁剪的像素。我最初的理解是，wire.model 不适用于由 JavaScript 更新的隐藏输入字段，因为当我提交表单时它总是返回 null。

<input type="hidden" id="formWidth" name="width" value="width" wire:model.defer="width">
<input type="hidden" id="formHeight" name="height" value="height" wire:model.defer="height">

当用户在图像周围移动裁剪工具时，该值会发生变化，因此一旦他们准备好提交，该值将如下所示：

<input type="hidden" id="formWidth" name="width" value="40px" wire:model.defer="width">
<input type="hidden" id="formHeight" name="height" value="20px" wire:model.defer="height">

我是 Livewire 的新手，我希望有人可以将我推向我应该如何处理隐藏输入的方向，或者如果有办法让 Livewire 读取 JavaScript 变量，我将不再在输入中更新它，而是一个新变量。

【问题讨论】：

如果您希望在裁剪图像时保留输入值，请从输入中删除wire:model 属性？
感谢您的回复 Tonoslfx，如果我不包括 wire:model 我看不到输入属性被提交到我的 livewire 组件。在我的组件中，我只设置了链接： $validated_data = $this->validate([ 'width' => 'required', 'height' => 'required', ]);

标签： javascript laravel laravel-livewire

【解决方案1】：

我最终在 Lirewire 的论坛上找到了我的解决方案，并认为如果其他人遇到与我相同的问题，我会分享：

设置值后，您可以执行以下操作：

var element = document.getElementById('description');
element.dispatchEvent(new Event('input'));

这应该会触发字段上的输入事件并导致 livewire 与您的后端通信。

【讨论】：