时间戳

首页 > 解决方案 > 如何在使用 axios 从 API 获取数据时更新我的​​ VueJs Data 函数属性值？

laravel - 如何在使用 axios 从 API 获取数据时更新我的​​ VueJs Data 函数属性值？

问题描述

我已成功从 API 获取数据。获取的数据显示在警报功能中。但是，数据函数中的属性，例如 - 'Recovered' 不会更新。我可以使用 Vanilla JS 显示获取的数据。但我想自动更新它们，并希望像这样 {{Recovered}} 显示它们。我该怎么做？？

<template>
    <div class="container">

        <h2>Total Recovered: {{Recovered}}</h2>

    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name:'CoronaStatus',
        data: function () {
            return {

                    Recovered: '',
                    TotalConfirmed: '',
                    TotalDeaths: '',
                    // test: '30',
                    // test_2: 'maheeb',
                    // componentKey: 0,



            }
        },
        mounted(){
            this.globalStatus();
        },

        methods:{
            globalStatus: function(){
                // const self = this;
                // this.componentKey += 1;
                axios.get('https://api.covid19api.com/summary')

                    .then((response) => {
                           // this.recovered = response.data.Global.NewConfirmed;
                        this.Recovered= response.data.Global.TotalRecovered;


                        alert(this.Recovered);

                    
                        // document.getElementById('test_5').innerHTML = "total: " + this.TotalRecovered;

                }).catch(err=> console.log(err));


            },


        }


    }
</script>

<style scoped>

</style>

标签： laravelapivue.jsaxios

解决方案

最简单的解决方案是使用setInterval每小时重新获取信息。

最好的解决方案是使用covid19api.com提供的 WebHook。

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>

推荐阅读