4

Como consigo que a exibição da lista se torne pausada,

exemplo espera 1 segundo exibe:

1 
+ 1 segundo
2
+ 1 segundo
3
<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

usei o setTimeout no created mais não deu certo.

1

1 Resposta 1

7

Para controlares isso tens de mudar o que o Vue usa para iterar, ou seja cria uma array e vai mudando a array à velocidade que precisas para ter o efeito desejado:

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>

A mesma coisa mas com uma propriedade 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>

2
  • 1
    Excelente reposta, fiquei tentando imaginar como seria uma resposta para esse pergunta, quase cheguei a dizer que dá forma que ele estava tentando isso seria impossível.
    – Marconi
    Commented 20/02/2019 às 12:29
  • 1
    +1 Vim na esperança de criar uma resposta, mas não vejo uma forma mais clara e simples que a sua :D Commented 20/02/2019 às 13:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .