Programmatically setting input value doesn't trigger wire:model update

#1

I have an autocomplete component where when the user hits tab or enter I set the value of an input element programatically (the value from one of the autocomplete suggestions). For example, if I type “A” and the first autocomplete item is “Apple” I hit enter.

Effectively I am doing document.getElementById(‘myInput’).value = ‘Apple’

And myInput has wire:model set as an attribute.

But when I do this it doesn’t result in the wire:model updating the way it does when I type in the field, i.e. the wire model will still be ‘A’.

Any help would be much appreciated!

#2

I have fixed this by adding a call to

@this.set(‘xxx’, this.input.value)

after setting the value of the element

#3

Just some additional info on why you’re running into this issue as I’ve come across it, too. wire:model is listening for some kind of event to trigger the server call to update the model. Typically when you’re typing in an input field, this behavior is triggered by the input and then debounce of the keys. If you wanted to keep your behavior the same, just trigger the event. The latest series of videos posted yesterday is really helpful for this.

#4

Another method of achieving same
window.livewire.find('<component_id>').set('<model or property>', '<value>');
Example
window.livewire.find($("#component").attr('wire:id')).set('users', $("#input-id").val());