Как задать mounted для элементов списка?

Question

[Andrej Sharapov]

Скрипт:


В нем, mounted считает time. При условии, что time не является элементом списка.
Подскажите, как перестроить скрипт, чтобы значения из списка так же считались от 0 (startVal) до endVal?

Answer 1

[0xD34F]

Сделайте отдельный компонент счётчика:

props: [ 'start', 'end', 'title', 'delay' ],
data: () => ({
  val: null,
}),
created() {
  this.val = this.start;
  const interval = setInterval(() => {
    if (++this.val >= this.end) {
      clearInterval(interval);
    }
  }, this.delay);
},

<div>
  <h3>{{ title }}</h3>
  <div>{{ val }}</div>
</div>

И создавайте сколько надо экземпляров:

data: () => ({
  counters: [
    { start: -20, end:  69, title:  'hello, world!!', delay: 40 },
    { start:   0, end: 187, title:  'fuck the world', delay: 45 },
    { start: 400, end: 666, title: 'fuck everything', delay: 20 },
  ],
}),

<v-counter
  v-for="n in counters"
  v-bind="n"
/>

Answer 2

[Антон]

https://jsfiddle.net/zt4yfhwb/1/