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

Question

I have a text input field which works great if I update it myself when typing inside it, however, what I need is to have this input field be populated with data from javascript, rather than the user. This is my input field

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

This is what happens if I type "123" in the input field, I get this for the input field's value:

However when I update it using javascript, document.getElementById("images").value = "Hello" The input field is populated with the new data:

But it doesn't make a new fetch call to get the data and the last one is with the "123" data that was inserted without javascript...

Any idea of how it can get the data after updating the input's value from javascript?

Answer 1

You can populate the input field using inline scripts in livewire like:

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

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

Make a public property name 'images, initiate it in the mount. I hope it will solve your problem. Let me know.

Answer 3

After changing the value of the input using javascript, you can trigger the input event to make livewire update the model.

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

If you're using wire:model.lazy, you should use a 'change' event instead of 'input'