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"

Answer 2

That's the expected behavior of a vue app/component. What it happens, is that when you use jQuery, you are editing the dom element and you can see the changes, but, as soon as some function in the component get triggered, the dom is being updated and your modifications are lost.