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

Question

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.

DreamInHex · Accepted Answer · 2022-05-19 18:03:29Z

1

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

app.getLocationFromZip(33701)

answered May 19, 2022 at 18:03

DreamInHex

1,11712 silver badges18 bronze badges

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

2 Comments

Jridyard Over a year ago

Thanks, this works! If you don't mind me asking, why does it work / how did you figure it out?

DreamInHex Over a year ago

I just inspected the code and saw that it was using a Vue app. Took a guess on the referenced parter-locator-vue.js script, opened it up, and saw the obvious getLocationFromZip function. Shame on them for not compressing and minifying their JS code.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related