Madeas
@Madeas
UX/UI designer | Frontend developer

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

Скрипт:


В нем, mounted считает time. При условии, что time не является элементом списка.
Подскажите, как перестроить скрипт, чтобы значения из списка так же считались от 0 (startVal) до endVal?
  • Вопрос задан
  • 71 просмотр
Решения вопроса 2
0xD34F
@0xD34F Куратор тега Vue.js
Сделайте отдельный компонент счётчика и передавайте в него данные:

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

UPD. https://jsfiddle.net/xsu57m9g/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы