How to set mounted for list items?

Question

Vue.js

Script:

In it, mounted counts time . Provided that time is not an element of the list.
Tell me how to rebuild the script so that the values ​​​​from the list are also considered from 0 (startVal) to endVal ?

Answer 1

Make a separate counter component and pass data to it:

<div id="app">
  <fucking-counter v-for="n in counters" v-bind="n"></fucking-counter>
</div>

Vue.component('fucking-counter', {
  props: [ 'start', 'end', 'title', 'delay' ],
  data: () => ({
    val: null,
  }),
  template: `<div>{{ title }}: {{ val }}</div>`,
  created() {
    this.val = this.start;
    const interval = setInterval(() => {
      if (++this.val >= this.end) {
        clearInterval(interval);
      }
    }, this.delay);
  },
});

new Vue({
  el: '#app',
  data: {
    counters: [
      { start: -20, end: 100, title: 'Counter 1', delay: 69 },
      { start:   0, end:  50, title: 'Counter 2', delay: 187 },
    ],
  },
});

https://jsfiddle.net/xsu57m9g/