Verwenden von CountUp in Vue

Question

Ich werde damit beginnen zu sagen, dass ich wirklich neu in Vue bin. Ich habe ein Projekt nach einem Tutorial abgeschlossen und dies ist das erste, das ich bisher alleine gemacht habe.

Ich baue eine einfache Seite, um die Punktzahl zwischen zwei Teams zu zeigen. Der Punktestand wird von einer API abgerufen und ich werfe dies alle 5 Sekunden ab und setze dann die Punktwertvariable für jedes Team auf den Punktestand, der jedes Mal von der API abgerufen wird.

Ich möchte das animieren, um auf die neue Punktzahl zu zählen, und bin nur ein wenig verloren, wie dies zu tun ist.

Ich fand countUp.js, die wirklich gut aussieht, aber das Problem ist, ich aktualisiere eine Vue-Variable und kein Element und so habe ich keine Ahnung, wie das geht.

Es sieht so aus, als ob es eine implementation for Vue gibt, aber nie npm verwendet habe, weiß ich nicht, was ich tue.

Hier ist meine app.js Datei, die mein Vue Code enthält:

var vm = new Vue({ 

    el: '#liveCounter', 
    data: { 

     teamA: 0, 
     teamB: 0 
    }, 
    methods: { 
     loadData: function() { 
      this.$http.get('https://dummyapi.com/getScore)').then(function (response) { 
       this.teamA = response.body.teama.summary.score; 
       this.teamB = response.body.teamb.summary.score; 
       console.log('polled'); 
      }, function(response) { 
       //nothing 
      }); 
     }, 
    }, 

    mounted: function() { 
     this.loadData(); 

     setInterval(function() { 
      this.loadData(); 
     }.bind(this), 5000); 
    } 
}); 

Kann jemand bitte helfen Sie mir eine Funktion zählen zu implementieren?

Answer 1

Es gibt einige Dinge, die Sie tun müssen, um vue-countup zu verwenden.

Zuerst installieren Sie folgenden Befehl im Code-Verzeichnis mit:

npm install --save vue-countup 

Dies wird diese installieren und einen Abhängigkeitseintrag in package.json erstellen.

Jetzt müssen Sie Vue sagen, dass Sie eine npm Bibliothek verwenden wollen, die Sie tun können, mit folgenden (wahrscheinlich in app.js oder wo Sie haben Vue importiert):

Vue.use(window.VueCountUp); 

Danach zwei Schritte können Sie voran gehen und verwenden Sie folgende in Ihrer Vorlage:

<vuecountup class="myCounter" :end="teamB" :duration="2.5" :options="{useEasing : true, 
      useGrouping : true, 
      separator : ',', 
      decimal : '.', 
      prefix : '', 
      suffix : ''}"></vuecountup>