@Ddpl

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

Здравствуйте! Как в 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')
  • Вопрос задан
  • 81 просмотр
Пригласить эксперта
Ответы на вопрос 2
@Kyber_Ded
как вариант создать массив копию и с таймаутом в секунду добавлять туда элемент для вывода
Ответ написан
@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);
  }
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы