Как в Vue вывести элементы из массива по одному в html, раз в секунду?

Question

[Ddpl]

Здравствуйте! Как в Vue вывести элементы из массива по одному в html, раз в секунду? В консоль вывести получается, а вот в html вывести ни как.

<div id="spn" v-for="item in reverseMessage">
{{  item }}

</div>

const Counter = {
  data() {
    return {
      items:  ["привет", "Найдено", "Границы поля", "Игра"]
    }
  },
  
   methods: {
   
    reverseMessage() {
    
    
     // let spn = document.getElementById("spn");
     let words = this.items;
    
       let i = 0;  
       let j=0;
       
       setInterval( fr,1000);  
       
    function fr(){       
    
     words+= words[i];
        if( words[i]){    
           
            i++;
            console.log(i);
         }        
         
      }
  }
 }
}

Vue.createApp(Counter).mount('#spn')

Answer 1

[GrayHorse]

sfc.vuejs.org demo

<template>
  <div v-for="i of items" :key="i">{{i}}</div>
</template>

<script setup>
import {ref, computed, onMounted} from "vue";

const data = ["1q", "2w", "3e", "4r", "5t", "6y"];
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
  
const items = ref([]);
onMounted(async () => {
  for (const value of data) {
    items.value.push(value);
    await sleep(1000);
  }
});
</script>

Или так

const limit = ref(0);
const items = computed(() => {
  return data.slice(0, limit.value);
});
onMounted(async () => {
  while (limit.value < data.length) {
    limit.value++;
    await sleep(1000);
  }
});

Comments

[Ddpl]

А почему так не работает? Ведь правильно же,

const Counter = {
  data() {
    return {
      it: "",
      items:  ["привет", "Найдено", "Границы поля", "Игра"]
    }
  },
  
   methods: {
   
    reverseMessage() { 
      let i = 0;      
       let fg = this.items;  
      
        if(fg[i]){   
            this.it += this.items[i]; 
            console.log(i);
             i++;             
        }  
          setTimeout( this.reverseMessage, 1000);      
            
      },
     
     reverseDfs() { 
      
          setTimeout( this.reverseMessage, 1000);    
            
      }
      
      }
 
}

Vue.createApp(Counter).mount('#spn');

[GrayHorse]

Отвал this'а.

Просто используй await sleep(1000); из моего примера.

[GrayHorse]

И отформатируй-таки код.

[Ddpl]

GrayHorse, и куда вставить await?

Answer 2

[Kyber_Ded]

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

Comments

[Ddpl]

всеравно не получается

const Counter = {
  data() {
    return {
      item :"",
      items:  ["привет", "Найдено", "Границы поля", "Игра"],
      i : 0
    }
  },
  
   methods: {
   
    reverseMessage() {           
        let words = this.items;
        let j;
       if( words[j]) {                 
             j++;
               this.item +=words[this.j];
               console.log(j);
        }
           setTimeout( this.reverseMessage, 1000);
       },
       
        dsg() {    
         setTimeout( this.reverseMessage, 1000);
     
       }
       
       
 }
}

Vue.createApp(Counter).mount('#spn')