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

Question

我有一个文本输入字段，如果我在其中输入时自己更新它，效果会很好，但是，我需要的是让这个输入字段填充来自 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 更新输入值后获取数据吗？

Answer 1

使用javascript更改输入值后，可以触发输入事件以使livewire更新模型。document.getElementById("images").value = 'Hello'; document.getElementById("images").dispatchEvent(new Event('input'));如果您使用wire:model.lazy，则应该使用“change”事件而不是“input”

Answer 2

<script>&nbsp; &nbsp; &nbsp; &nbsp; document.addEventListener('livewire:load', function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;@this.set('images','Hello');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//console.log('Hello');&nbsp; &nbsp; &nbsp; &nbsp; });</script>创建一个公共属性名称“images”，在挂载中启动它。我希望它能解决你的问题。让我知道。

Answer 3

您可以使用 livewire 中的内联脚本填充输入字段，例如：document.addEventListener('livewire:load',function ()&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @this.images = "Hello";&nbsp; &nbsp; &nbsp; &nbsp; });<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">

Answer 4

在输入字段的父元素上添加wire:ignore喜欢<div wire:ignore>&nbsp; &nbsp;<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"></div>