从 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”，在挂载中启动它。我希望它能解决你的问题。让我知道。

Answer 3

您可以使用 livewire 中的内联脚本填充输入字段，例如：

document.addEventListener('livewire:load',function ()

        {

            @this.images = "Hello";

        });

<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>

   <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>