I am a vue beginner and would like to ask a question! My English is not good but I try to describe my problem pletely, thank you.

Currently I use vue to learn how to access the API, but I hope to be able to automatically touch the API again every 3 seconds to update the screen, but I really don’t know how to achieve this?

Hope to get your help, thank you again for watching my question.

My example

I am a vue beginner and would like to ask a question! My English is not good but I try to describe my problem pletely, thank you.

Currently I use vue to learn how to access the API, but I hope to be able to automatically touch the API again every 3 seconds to update the screen, but I really don’t know how to achieve this?

Hope to get your help, thank you again for watching my question.

My example

• javascript
• vue.js
• vuejs3

• developer.mozilla/en-US/docs/Web/API/… – AdityaParab Commented Aug 9, 2021 at 14:14

2 Answers 2

Add setInterval in created hook that calls the method that loads the data :

Vue.createApp({
    data() {
    return {
      status: true,
      data: [],
      interval:null
    };
  },
  methods: {
    reNew() {
      axios.get("https://randomuser.me/api/?results=5").then(
      (response) =>
          // console.log(response)
          (this.data = response.data.results)
      )
    }
  },
  mounted() {
    this.reNew()
  },
  created(){
    this.interval = setInterval(() =>{
      this.reNew()},3000)
  },
  destroyed(){
    clearInterval(this.interval)
  }
}).mount('#app');

You can use the setInterval method.

This would execute the function every 3 seconds.

setInterval(function(){ 
// fetch data...
}, 3000);