VueでCountUpを使用

Question

私はVueには本当に新しいと言って始めます。私はチュートリアルの後に1つのプロジェクトを完了しました。これは私が今まで自分で行った最初のプロジェクトです。

私は、2つのチーム間でスコアを表示する簡単なページを作成しています。スコアはAPIから取得されており、5秒ごとにこれをポーリングし、各チームのスコア変数をAPIから毎回取得したスコアに設定しています。

私はこれを新しいスコアまで数え上げるためにアニメーション化したいと思いますし、これをどうやって行うのかちょっと分かりません。

私はcountUp.jsが本当にうまく見えますが、問題はVue変数と要素ではないため、これを行う方法がわかりません。

implementation for Vueがありますが、npmを一度も使用していないようです。私は何をしているのか分かりません。ここで

は私のVueのコードが含まれている私のapp.jsファイルです。

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); 
    } 
}); 

誰かが私にカウントアップ機能を実装して助けてくださいことはできますか？

Answer 1

vue-countupを使用する必要があることはいくつかあります。

まず、コードのディレクトリで次のコマンドを使用してインストールします

npm install --save vue-countup 

この本をインストールし、package.json内の依存関係のエントリを作成します。

今、あなたはあなたが（おそらくapp.jsにまたはどこにVueのを輸入している）以下の使用して行うことができますNPMライブラリを使用しようとしていることを、Vueのを指示する必要があります。この2後

Vue.use(window.VueCountUp); 

をテンプレートで次のステップを実行することができます。

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