Laravel 从 javascript 更新输入字段时，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" 更新它时输入字段填充了新数据：

但是它不会进行新的获取调用来获取数据，最后一个是在没有 javascript...

的情况下插入的“123”数据

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

Answer 1

您可以在 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 2

使用javascript更改输入值后，可以触发输入事件使livewire更新模型。

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

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

Answer 3

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

制作一个public属性名称'images，在挂载中启动它。我希望它能解决你的问题。让我知道。

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

Laravel livewire model is not working when updating input field from javascript?

javascript

laravel

laravel-livewire