Проблема с методом, не возвращающим значения в интерполяции nuxjs / vue

Question

В моей статической папке приложения nuxtjs есть файл с именем data.json

в моем компоненте я использую эти данные примерно так

<script>
import data from '~/static/data.json';
export default {
    data ({ params }) {
        return {
            data
        }
    }
}
</script>

теперь у меня есть метод, который в основном будет брать значения из этих данных и создавать небольшую анимацию для подсчета, например, так:

methods: {
    countUp(value) {
        for (let i = 0; i <= value; i++) {
            setTimeout(() => {
                return i;
            }, 100);
        }
    }
}

и в моем шаблоне я так называю

<template>
    <div>
       <p>{{countUp(data.number)}}</p>
    </div>
</template>

теперь ожидаемый результат для числа, чтобы быстро измениться от 0 до значения, но ничего не печатается на DOM, если я проверяю элемент html на его пустое ??

Что я делаю не так ??

Answer 1

setTimeout не работает так, как вы думаете:

• Невозможно вернуть значение из функции обратного вызова;из метода countUp ничего не возвращается.
• Вызов setTimeout не блокируется, это означает, что он немедленно вернет после вызова и функция обратного вызова, переданная ему:запланировано выполнение асинхронно после истечения времени ожидания.Таким образом, каждый вызов setTimeout в цикле for будет выполняться сразу после 100 мс, а не в шахматном порядке.

Вам необходимо сохранить текущее значение счетчика в качестве данных компонента, поэтому Vueзнает, как переопределить при изменении его значения.

Ниже приведен простейший пример, который я могу привести, но вы можете инкапсулировать логику в отдельный компонент многократного использования.

const value = 50

new Vue({
  el: '#app',

  data: {
    counter: 0,
  },

  methods: {
    countUp() {
      const interval = setInterval(() => {
        this.counter++
        
        if (this.counter >= value) {
          clearInterval(interval)
        }
      }, 100)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <button @click="countUp">Count Up</button>
  {{ counter }}
</div>