当使用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" 输入框将用新数据填充：

但它不会进行新的获取数据的操作，最后一次操作仍然是插入 "123" 数据的操作，而没有使用 JavaScript...

有没有什么方法可以在使用javascript更新输入框的值后获取数据？

- user13289818

Answer 1

使用JavaScript更改输入的值后，您可以触发输入事件来使Livewire更新模型。

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

如果你正在使用 wire:model.lazy，你应该使用“change”事件而不是“input”事件。

- Craig E

---

谢谢兄弟，我对Livewire非常陌生，事实上并不喜欢它，但有一些任务需要完成。我遇到了问题，尝试了很多方法，然后发现了你的建议，它起作用了，谢谢你。 - Shakeel Ahmad

Answer 2

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

在mount中初始化一个名为“images”的公共属性。我希望这可以解决你的问题。让我知道。

- Azahar Alam

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

- Md Somir

---

我应该在哪里添加这个事件监听器？ - user13289818

在您的 Livewire Blade 文件中... 参考链接：https://laravel-livewire.com/docs/2.x/inline-scripts - Md Somir

有没有一种方法可以在不触发 Livewire 更新的情况下进行更改？ - Sodj

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>

- Abhinav Saraswat