从 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>
        document.addEventListener('livewire:load', function () {
           @this.set('images','Hello');
           //console.log('Hello');
        });
</script>

创建一个公共属性名称“images”，在挂载中启动它。我希望它能解决你的问题。让我知道。