VueJS <input> value change not calling @change

Question

With VueJS, I have two seperate components.

A modal and a form.

In the modal form, the user inputs a PIN that gets confirmed then this value is set to an input tag in the form to basically save this value.

In the modal component, I set the value simply like this:

document.getElementById('pin').value = this.pin_input;

Within the form component, the input tag is like this:

<input type="hidden" @change="submit()" id="pin">

In the console, the value of this input tag get's set correctly, though the @change="submit()" is not getting called when the values changes.

submit method code within form component that is not getting called:

methods : {
   submit : function(){
       console.log("SUBMIT HERE");
   }    
}

Why is my input tag's @change not getting called?

this is not a correct implementation. You should adhere to the vue js models and data properties. — arora
– arora, Commented Apr 20, 2019 at 19:58
You shouldn't set values by using DOM manipulations because Vue doesn't watch for DOM changes (only it's own virtual DOM) thus they are completely disregarded and are overwritten on next update tick. Your problem can probably be solved but you need to share your component's code. — dziraf
– dziraf, Commented Apr 20, 2019 at 19:58

Michael2 · Accepted Answer · 2019-04-20 20:16:21Z

1

Setting the value on a DOM element does not fire the input / change events. This is why the event listener you set in vue is not called.

You can fire those events manually, they will then be picked up by vue.

var element = document.getElementById('pin');
element.value = this.pin_input;
// Works in most modern browsers.
var event = new Event('change');
element.dispatchEvent(event);

answered Apr 20, 2019 at 20:16

Michael2

9304 silver badges17 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-15 04:18:23Z

0

From my point of view, For communication between components it's better to use:

some state management like Vues https://vuex.vuejs.org/, and save input value in separate store or
try with custom methods https://v2.vuejs.org/v2/guide/components-custom-events.html
use parent component and pass callback into child components.

@change will not work in your case

edited Jul 15, 2022 at 4:18

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 20, 2019 at 20:15

dimas

3892 silver badges5 bronze badges

Collectives™ on Stack Overflow

VueJS <input> value change not calling @change

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related