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

9rygscc1  于 2023-05-19  发布在  Java
关注(0)|答案(4)|浏览(136)

我有一个文本输入字段,如果我在里面输入时自己更新它,它会工作得很好,但是,我需要的是让这个输入字段填充来自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的输入值后,它是如何获取数据的?

ryevplcw

ryevplcw1#

在使用JavaScript更改输入的值之后,您可以触发input事件来使livewire更新模型。

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

如果你使用wire:model.lazy,你应该使用一个‘change’事件而不是‘input’

kdfy810k

kdfy810k2#

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

创建一个公共属性名'images,在挂载中初始化它。我希望它能解决你的问题。告诉我

jgovgodb

jgovgodb3#

您可以使用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">
fv2wmkja

fv2wmkja4#

添加wire:忽略输入字段父元素上的
喜欢

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

相关问题