Vue: setInterval not updating timer variable

Question

Vue: setInterval not updating timer variable

Here is my code for updating and displaying the number of elapsed seconds:

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

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

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

  created()  {
     let seconds = 0;
      this.timerValue = seconds;
      setInterval(function()  {
           seconds++;
      })
  }
};
</script>

Despite my efforts, the page always displays

I'm not sure what I am doing wrong. Can someone help me figure it out?

https://codesandbox.io/s/still-cache-1mdgr6?file=/src/App.vue

javascript vue.js vuejs3

Answer 1

Answer №1

If you're looking for a solution, perhaps the code snippet below can help:

const app = Vue.createApp({
  data() {
    return {
      timerValue: 0 // default value is set to 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>

Answer 2

If you're looking for a solution, perhaps the code snippet below can help:

const app = Vue.createApp({
  data() {
    return {
      timerValue: 0 // default value is set to 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>

Answer 3

Answer №2

Instead of incrementing seconds, make sure to increase this.timerValue within the code.

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

You can also achieve the same result using arrow functions:

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

Answer 4

Instead of incrementing seconds, make sure to increase this.timerValue within the code.

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

You can also achieve the same result using arrow functions:

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

Answer 5

Answer №3

Here are three important points to keep in mind:

In the setInterval function, only the seconds variable is being updated, not this.timerValue. This results in the page always displaying 0.
The setInterval function does not have an interval argument specified, so it will not run every second as intended.
The initialization value is unclear, take some time to understand the program logic and review what you have written.

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

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

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

  mounted()  { // using mounted is better than created in this scenario
      setInterval(() => {
           this.timerValue++;
      }, 1000)
  }
};
</script>

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

Answer 6

Here are three important points to keep in mind:

In the setInterval function, only the seconds variable is being updated, not this.timerValue. This results in the page always displaying 0.
The setInterval function does not have an interval argument specified, so it will not run every second as intended.
The initialization value is unclear, take some time to understand the program logic and review what you have written.

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

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

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

  mounted()  { // using mounted is better than created in this scenario
      setInterval(() => {
           this.timerValue++;
      }, 1000)
  }
};
</script>

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

Answer 7

Answer №4

If you want to dive into something new, I always recommend starting with language logic or at least JavaScript.

It's important 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 // initial value is set as a number
    }
  },

  created()  {
      setInterval(() => {
           this.timerValue++;
      }, 1_000 /* delay of 1 second */)
  }
};
</script>

Answer 8

If you want to dive into something new, I always recommend starting with language logic or at least JavaScript.

It's important 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 // initial value is set as a number
    }
  },

  created()  {
      setInterval(() => {
           this.timerValue++;
      }, 1_000 /* delay of 1 second */)
  }
};
</script>

Answer 9

Answer №5

I discovered two issues with my code:

Using this within a function(). It is preferable to use an arrow function, like so:

setInterval(() => {}

this.timerValue = seconds alone does not prompt Vue to update timerValue when seconds changes. Modifying seconds does not automatically update timerValue.

This can be addressed by utilizing a computed property:

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

The revised code would resemble the following:

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>

Answer 10

I discovered two issues with my code:

Using this within a function(). It is preferable to use an arrow function, like so:

setInterval(() => {}

this.timerValue = seconds alone does not prompt Vue to update timerValue when seconds changes. Modifying seconds does not automatically update timerValue.

This can be addressed by utilizing a computed property:

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

The revised code would resemble the following:

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>

Vue: setInterval not updating timer variable

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Tips for properly formatting functional Vue components?

Vue Eslint Extension

What could be the reason for PassportJS in Node failing to clear the session upon logout?

Completed Animation with Callback in AngularJS CSS

The loading of the module from was hindered due to an invalid MIME type restriction

The button fails to function properly following the initial successful loading of ajax data

Verify if the user is already present in the MongoDB database and authenticated with Passport

Transitioning from Vuetify 2 to Vuetify 3: Handling v-list-item-icon with v-if Conditionals

"Exploring the Power of Angular Change Detection with Promises in a Hybrid

Update the JSON by replacing any null values with a predefined string

How can we accurately identify the server that initiated an AJAX call in a secure manner?

What categories do input events fall into within Vue?

Sharing data between Test1 and Test2 components in Vue.js

Can anyone recommend an easy regular expression to validate date format patterns?

Unity3D: Troubleshooting a Code Issue

Backand - How can I display the contents of variables using console.log() within Security Actions?

Utilizing Google App Engine for seamless deployment, integrating Ajax for dynamic interactions, and

What is the proper jQuery traversal method to display a single templated element?

Error message: Iframe chrome encountered a Uncaught DOMException when attempting to access the 'localStorage' property from 'Window': Document does not have permission

The issue with the trigger function in jQuery is specifically affecting Chrome browser