vuejs / Discussion

Vue.js discussion
167 stars 17 forks source link

unable to Update data from Methods in Vue Instance #1267

Open caype opened 8 years ago

caype commented 8 years ago

I have an input box which minutes as an input value :

<input type="text" id="EneredMinutes" v-model='minutes' placeholder="20">

and a method in the vue instance which calculates time left for the enterd minutes.

triggerCounter:function(){
                  var min = parseInt(document.getElementById('EneredMinutes').value);
                  var sec=0;

                  var tym = setInterval(function(){
                    if(sec==0&min>0){
                      sec=60;
                      min=min-1;
                    }
                    else if(sec>0){
                      sec=sec-1;
                     this.minutes=min;
                     this.seconds=sec;
                      console.log(min+':'+sec);
                    }
                    else{
                      clearTimeout(tym);
                      console.log('time up!!');
                    }
                  }, 1000);
                }

however the view does not get updated even though the values outputed to the console are perfect.

I also tried to directly manipulate the minute values :

triggerCounter:function(){

                  var tym = setInterval(function(){
                    if(parseInt(this.sec==0)&parseInt(this.minutes)>0){
                      this.seconds=60;
                      this.minutes=this.minutes-1;
                    }
                    else if(sec>0){
                      this.seconds=this.seconds-1;
                      console.log(this.minutes+':'+this.seconds);
                    }
                    else{
                      clearTimeout(tym);
                      console.log('time up!!');
                    }
                  }, 1000);
                }

I started exploring Vue from a week and im stuck with this issue for the past 5 hours.

Help is appreciated.

Thanks in Advance, Chaya.