[Vuejs]-How can I update my VueJs Data function properties value while fetching data from API using axios?

by

0👍

✅

The easiest solution would be to refetch the information every hour with setInterval.

The best solution would be to use the WebHook provided by covid19api.com.

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    Recovered: "Loading ..."
  },
  mounted() {
    setInterval(() => {
      this.globalStatus();
    }, 3600000); // Call globalStatus every hour 
    this.globalStatus();
  },
  methods: {
    globalStatus: function() {
      axios
        .get("https://api.covid19api.com/summary")
        .then(response => {
          this.Recovered = response.data.Global.TotalRecovered;
        })
        .catch(err => console.log(err));
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<div id="app">
  <h2>Total Recovered: {{ Recovered }}</h2>
</div>

Leave a comment