Search code examples
javascriptlaravellaravel-livewire

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

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:

enter image description here

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

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

enter image description here

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

Solution

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