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?

Craig E · Accepted Answer · 2020-12-01 05:07:47Z

15

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'

answered Dec 1, 2020 at 5:07

Craig E

8826 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shakeel Ahmad Over a year ago

Thanks bro, i am very new to livewire, in fact don't like it but have some task to do, I was stuck in the problem, tried a lot of ways, then find your suggestion and it work thank you

Szymon Cybulski Over a year ago

Worked like a charm with a change event for a radio button. Thanks!

Md. Azahar Alam · Accepted Answer · 2020-12-22 13:32:09Z

5

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

answered Dec 22, 2020 at 13:32

Md. Azahar Alam

7415 silver badges18 bronze badges

Comments

Md Somir · Accepted Answer · 2020-11-30 05:54:17Z

2

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

answered Nov 30, 2020 at 5:54

Md Somir

5705 silver badges10 bronze badges

3 Comments

user13289818 Over a year ago

where should I add this event listener?

Md Somir Over a year ago

In your livewire blade file ... for reference: laravel-livewire.com/docs/2.x/inline-scripts

Sodj Over a year ago

is there a way to make the change without triggering a livewire update?

Abhinav Saraswat · Accepted Answer · 2023-05-17 13:01:02Z

1

Add wire:ignore on parent element of the input field

Like

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

answered May 17, 2023 at 13:01

Abhinav Saraswat

8198 silver badges13 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related