Search code examples
javascriptvue.jsgoogle-chromeinspector

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

Solution

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