CODEWITHSUNDEEP
javascriptvue.jsgoogle-chromeinspector
user13268984
user13268984

Reputation: 35

Vuejs , set input value bound to a model from chrome inspector console

I have an VueJS app (compiled) and there is an input field and a submit button. The button checks if the input isnt empty. When i type the value in the input and press the button it works ok.

Can I set the input value via javascript ( from chrome console ) ?

I tried with

document.querySelectorAll('.form input')[0].dispatchEvent(new Event('focus'));
document.querySelectorAll('.form input')[0].value = 1
document.querySelectorAll('.form input')[0].dispatchEvent(new KeyboardEvent('keypress',{'key':'1'}));

and then pressing the submit button but it says "field is empty". Seems like doing that doesnt update the model.

Any help?

Thank you

Upvotes: 2

Views: 1105

Answers (1)

Larizza Tueros
Larizza Tueros

Reputation: 629

If you have the devtools installed you can use $vm0 as the selected instance, if not select your HTML element that contains the app and use .__vue__

To access the model of the instance, just use data. So if your input is bound to a data variable called, search you just need to change that.

const vm = document.getElementById('web-page').__vue__
vm.$data.search = 'searching...'

Upvotes: 5

Related Questions