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迅速变为值，但是如果我检查html元素为空，则dom上没有任何内容打印出来？

我在做什么错？？

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>

在插值nuxjs / vue中方法不返回值的问题

1 个答案: