v-for vuejs how to charge with timer

Question

How do I get the list display to be paused,

example wait 1 second display:

1 
+ 1 segundo
2
+ 1 segundo
3

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

I used setTimeout in created but it didn’t work.

Answer 1

To control this you need to change what Vue uses to iterate, that is to create an array and change the array at the speed you need to have the desired effect:

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var demo = new Vue({
  el: '#demo',
  data() {
    return {
      arr: arr.slice(0, 1),
      showUpTo: 1,
    }
  },
  mounted() {
    const timer = setInterval(() => {
      this.showUpTo++;
      this.arr = arr.slice(0, this.showUpTo);
      if (this.showUpTo === arr.length) clearInterval(timer);
    }, 1000);
  }
});

<script src="http://vuejs.org/js/vue.min.js"></script>
<div id="demo">
  <div>
    <p v-for="n in arr">{{ n }} </p>
  </div>
</div>

The same thing but with property computed:

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var demo = new Vue({
  el: '#demo',
  data() {
    return {
      showUpTo: 1,
    }
  },
  computed: {
    arr() {
      return arr.slice(0, this.showUpTo);
    }
  },
  mounted() {
    const timer = setInterval(() => {
      this.showUpTo++;
      if (this.showUpTo === arr.length) clearInterval(timer);
    }, 1000);
  }
});

<script src="http://vuejs.org/js/vue.min.js"></script>
<div id="demo">
  <div>
    <p v-for="n in arr">{{ n }} </p>
  </div>
</div>