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.

Please create a small demo for this using codesandbox.io to show the issue happening. You don't need to post full code, just add few inputs in a component and the jquery code to show the issue. — palaѕн
– palaѕн, Commented Jul 3, 2020 at 8:22
Already when I saw the title... You are going about this already wrong from the get-go. Don't use jQuery with vue. There is no need, vue (mostly!) have the tools needed to do what you want. I haven't yet found a single reason to use jQuery with vue. — AVJT82
– AVJT82, Commented Jul 3, 2020 at 8:33

Raffobaffo · Accepted Answer · 2020-07-03 08:22:11Z

3

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.

answered Jul 3, 2020 at 8:22

Raffobaffo

2,90611 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SkyMan Over a year ago

Thanks. That makes sense. Can you help me understand how I can alter the Vue component directly then? I’m a stranger to Vue, so it would really help if you can point me in the right direction.

Yiping · Accepted Answer · 2020-07-06 02:19:21Z

2

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"

answered Jul 6, 2020 at 2:19

Yiping

1,07912 silver badges35 bronze badges

1 Comment

SkyMan Over a year ago

This was very helpful. Thanks.

Collectives™ on Stack Overflow

Setting values in a Vue.js form using jQuery

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related