从 javascript 更新输入字段时，Laravel livewire 模型不起作用？答案

【问题标题】：Laravel livewire model is not working when updating input field from javascript?从 javascript 更新输入字段时，Laravel livewire 模型不起作用？
【发布时间】：2021-03-11 18:19:29
【问题描述】：

我有一个文本输入字段，如果我在其中输入时自己更新它，它会很好用，但是，我需要让这个输入字段填充来自 javascript 的数据，而不是来自用户的数据。这是我的输入字段

<input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="images" wire:model="images">

如果我在输入字段中键入“123”会发生这种情况，我会得到输入字段的值：

但是，当我使用 javascript 更新它时，document.getElementById("images").value = "Hello" 输入字段填充了新数据：

但它并没有进行新的 fetch 调用来获取数据，最后一个是在没有 javascript 的情况下插入的“123”数据...

知道从 javascript 更新输入值后如何获取数据吗？

【问题讨论】：

标签： javascript laravel laravel-livewire

【解决方案1】：

<script>
        document.addEventListener('livewire:load', function () {
           @this.set('images','Hello');
           //console.log('Hello');
        });
</script>

创建一个公共属性名称'images，在挂载中启动它。我希望它能解决你的问题。告诉我。

【讨论】：

【解决方案2】：

您可以使用 livewire 中的内联脚本填充输入字段喜欢：

document.addEventListener('livewire:load',function ()
        {
            @this.images = "Hello";
        });

&lt;input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="images" wire:model="images"&gt;

【讨论】：

我应该在哪里添加这个事件监听器？
在您的 livewire 刀片文件中...供参考：laravel-livewire.com/docs/2.x/inline-scripts
有没有办法在不触发 livewire 更新的情况下进行更改？

【解决方案3】：

使用javascript修改input的值后，可以触发input事件让livewire更新模型。

document.getElementById("images").value = 'Hello';
document.getElementById("images").dispatchEvent(new Event('input'));

如果你使用wire:model.lazy，你应该使用'change'事件而不是'input'

【讨论】：