CODEWITHSUNDEEP
javascriptvue.js
FlyC
FlyC

Reputation: 1874

Vue.js: use setTimeout function changing input value?

I'm the very beginning of Vue.js, I just meeting v-model part, here is the code:

HTML:
<div id="app"> <p> {{message}} </p> <input v-model="message" id="input_id"> </div>

javascript: 

var v = new Vue({
  el:"#app",
  data:{
    message: "Hello"
  }
});

var inputDOM = document.querySelector('#input_id');

setTimeout(function(){
  inputDOM.value = "Changing By timeout";
},1500);

Yes, when I type some text in input tag, the innerHTML of <p> will change as long as I type. BUT
If I use setTimeout function to change the value of input tag, the innerHTMl of <p> won't change.
and yes, if use setTimeout function to change the value of data object, the input value will as long as change.

here is the vue.js I include:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
and here is the demo on codepen.io

Without any purpose indeed, so I don't need any other solution to handle that two-way binding, just a little bit curious why.

Upvotes: 1

Views: 2489

Answers (1)

Mani Jagadeesan
Mani Jagadeesan

Reputation: 24265

When you type inside the input box, the changes are handled by the getter / setter methods of Vue, as explained in this page: https://v2.vuejs.org/v2/guide/reactivity.html

In the above case, input box is within the Vue app. Therefore Vue is able to set up its getter / setter methods to handle those changes.

When the anonymous function runs within setTimeout, it is done outside the Vue app. The value of input box gets changed directly using javascript, but outside the scope of Vue app. Therefore its getter / setter methods are not triggered. And therefore the changes are not reflected in your Vue template.

Upvotes: 3

Related Questions