Как я могу обновить свое значение свойства функции VueJs Data при получении данных из API, используя ax ios? - PullRequest
Новая
       23

Как я могу обновить свое значение свойства функции VueJs Data при получении данных из API, используя ax ios?

0 голосов
/ 27 апреля 2020

Я успешно получил данные из API. Выбранные данные отображаются в функции оповещения. Однако свойства в функции данных, такие как «Восстановленные», не обновляются. Я могу показать извлеченные данные, используя Vanilla JS. Но я хочу обновить их автоматически и показать их {{Восстановлено}}. Как я могу это сделать ?? 

<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>

1 Ответ

0 голосов
/ 28 апреля 2020

Самое простое решение - каждый час обновлять информацию с помощью setInterval .

. Лучшим решением будет использование WebHook , предоставленного 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>
...