[Vuejs]-Vue: timer value doesn't update when using setInterval

by

1👍

✅

Maybe like following snippet:

const app = Vue.createApp({
  data() {
    return {
      timerValue: 0 // set value default is 0 
    }
  },
  created()  {
      setInterval(() => {
           this.timerValue++;
      }, 1000)
  }
})
app.mount('#demo')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div>
    {{timerValue}}
  </div>
</div>
👤Nikola Pavicevic

1👍

You shuold increment this.timerValue instead seconds

created()  {
     let seconds = 0;
      this.timerValue = seconds;
      setInterval(function()  {
           this.timerValue++;
      }.bind(this))
  }

Or with arrow functions

created()  {
     let seconds = 0;
      this.timerValue = seconds;
      setInterval(() => {
           this.timerValue++;
      })
  }
👤Evgeny Naumov

1👍

I have 3 points for you to pay attention to

  • In the setInterval function you only change the seconds variable, not this.timerValue at all. So page always shows 0.
  • The setInterval function doesn’t have interval argument yet, so it won’t run every second.
  • Also the initialization value is not clear, I think you should understand the logic of the program and spent a little time for understand what you written.
<template>
 
 <div>
   {{timerValue}}
 </div>
 
 </template>

<script>
 export default {
  name: "App",
  components: {
     
  },

  data() {
    return {
      timerValue: 0,
    }
  },

  mounted()  { // use mounted much better than created in this case
      setInterval(() => {
           this.timerValue++;
      }, 1000)
  }
};
</script>

refs: https://www.w3schools.com/jsref/met_win_setinterval.asp

👤Lee

0👍

that’s why i always tell people to learn language logic or at least javascript before learning something else

you need to update the react value because javascript doesn’t have an api that allows memory cell assignment

<script>
 export default {
  name: "App",
  components: {
     
  },

  data() {
    return {
      timerValue: 0 // set default value is number
    }
  },

  created()  {
      setInterval(() => {
           this.timerValue++;
      }, 1_000 /* delay 1s */)
  }
};
</script>
👤Tachibana Shin

0👍

I found two things wrong about my code:

  1. Using this inside a function(). An arrow function should be used, like this:
setInterval(() => {}
  1. this.timerValue = seconds is not enough to make Vue update timerValue when seconds is updated. Change of seconds doesn’t trigger change of timerValue.

It can be solved by using computed property:

computed:  {
  timerValue: function()  {
    return this.seconds;
  }
},

So the whole code would look like this:

https://codesandbox.io/s/festive-cannon-8qvpn9?file=/src/App.vue

<template>
  <div>
    {{ timerValue }}
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},

  data() {
    return {
      seconds: 0,
    };
  },

  created() {
    setInterval(() => {
      this.seconds++;
    }, 1000);
  },

  computed: {
    timerValue: function () {
      return this.seconds;
    },
  },
};
</script>
👤parsecer

Leave a comment