Vuejs，从 chrome 检查器控制台设置绑定到 model 的输入值

Question

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

Answer 1

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