Setting values in a Vue.js form using jQuery

Question

I have a huge form that's on an external website (no control over source code) that's been created with Vue.js. I'm trying to bulk update this form by using the console. When I try to change the values of the field using jQuery with something like

$('#build-table-body').find('.input-group__input input:eq(3)').val('222')

I can get the value in the input to change, but it doesn't actually persist. The moment I move to another field or submit the form, the values go back to what they were previously.

If it helps, the site is using vue.js 2.5.2, vuetify and vuex. I can't share the site as it's only accessible through VPN. Would appreciate any help on this.

Answer 1

You can access the vue instance and the data part https://stackoverflow.com/a/58500685/3559256

If your data is in vuex, try to apply the same trick.

Try at https://codesandbox.io/s/l3p6kjo7pl

$v = document.getElementById('app').__vue__
$v._data.firstName = "ccc"