【Vue.js】ページのアクセス時にドラムロールを実行させたい

Question

vueを用いて、ページにアクセスするとドラムロール:指定した値まで数値が上昇するアニメーションが実行されるようにしたいです。

https://zukucode.com/2017/06/vue-animation-number.html

上記のサイトを参考に、次のようにして実装しました。

<div id="app">
  <div>
    <animated-number></animated-number>
  </div>
</div>
<script>
Vue.component('AnimatedNumber', {
  template: '<span>{{ animated_number }}</span>',
  data () {
    return {
      num: 0, //ドラムロール終了時の値,アクセス時に更新
      animated_number: 0
    };
  },
  watch: {//ドラムロール実行部分,今回この部分が呼び出されない
    num (newValue, oldValue) {
      let timeCnt = 0;
      let timer;
      const animate = () => {
        timeCnt++;
        if (timeCnt <= 70) {
          this.animated_number = Math.floor((newValue - oldValue) * timeCnt / 70) + oldValue;
          timer = setTimeout(() => {
            animate();
          }, 10);
        } else {
          clearTimeout(timer);
          timer = null;
          this.animated_number = newValue;
        }
      };
      animate();
    }
  },
  mounted () {
    this.animated_number = this.num;
  },
  methods: {
    window:onload = () => {
      this.num = 100;//0からこの値までドラムロールさせたい
    }
  },
})
</script>

読み込み時にwindow:onloadの部分で値を更新したのですが,watchが呼び出されずドラムロールがされません。因みに親ノードのappにこのnumを持たせて次のように実装すればうまくいきました:

<div id="app">
  <div>
    <animated-number :value="num"></animated-number>
  </div>
</div>

Vue.component('AnimatedNumber', {
  template: '<span>{{ animated_number }}</span>',
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      animated_number: 0
    };
  },
  watch: {
    value (newValue, oldValue) {
      let timeCnt = 0;
      let timer;
      const animate = () => {
        timeCnt++;
        if (timeCnt <= 70) {
          this.animated_number = Math.floor((newValue - oldValue) * timeCnt / 70) + oldValue;
          timer = setTimeout(() => {
            animate();
          }, 10);
        } else {
          clearTimeout(timer);
          timer = null;
          this.animated_number = newValue;
        }
      };
      animate();
    }
  },
  mounted () {
    this.animated_number = this.value;
  }
})

var app = new Vue({
  el: '#app',
  data: {
    num: 0,
  },
  methods: {
    window:onload = () => {
      app.num = 100;
    }
  },
});

が、appに対してnumを持たせて、それを子ノードで受け取って、、、というプロセスは、冗長な気がします。できれば子ノードのなかだけで完結させたいです。

Answer 1

サンプルつくりました。
１づつカウントアップしますが、そのあたりは調整してみてください。

サンプル

---

  methods: {
    window:onload = () => {
      this.num = 100;//0からこの値までドラムロールさせたい
    }
  },

の部分は、シンタックスエラーではないですね。すみません。
0. onload = () => { ... } の代入が実行される

1. =の実行結果で() => { ... }が返される
2. windowメソッドとして登録される

という処理でした。
ただ、直観的ではないのと、一般的な書き方ではないので、おすすめはしないですね。

Comments

[knmr]

シンタックスエラーはでていないようです。試しにこの関数内にconsole.log(this.num)を追加してロードしたところ、コンソールに100が出力されました。