Sending keys / manipulating value of input field (vue.JS input)

I’m trying to send data to an input field on this website: https://www.avigilon.com/how-to-buy/partner-locator

You can programmatically identify the input using the following:

let input = $('input[placeholder="Zip code / Postal code"]')[0]

if you then pass input.value = '33701' it will change the input, but the moment you press ‘Search’ it resets it to the null value.

I typed a few keys in, then changed it using input.value = '33701' and it reset it back to the keys i’d typed in manually, so I tried passing a keyup event like this: input.dispatchEvent(new KeyboardEvent('keyup', {'key': '3'})); but it didnt add the key. I added an event listener and the event is triggering, but the key is just not being added to the input.

I tried this same event dispatch method in my own app and it accepted the key. I also tried keydown and keypress.

I looked at the page source and noticed the input field has a property called v-model='selectedZipcode'. I’ve never used Vue before so I didn’t recognize it. In doing research, it looks like the v-model input components accept keys differently to regular inputs.

I am struggling to find info on how I can pass keys into this v-model input.

Answer

You don’t even need to set the zipcode, just reference the Vue app itself and call:

app.getLocationFromZip(33701)