JSFiddle - React, Tailwind, and code Playground

by cmaai

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>

  <div>
    <p v-for="item in exams" :key="item.id">{{ item.name }}{{item.id}}{{item.name}}{{item.id}}</p>
  </div>
</div>

JavaScript

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue.js!',
      exams: [{
          id: 1,
          name: 'a'
        },
        {
          id: 2,
          name: 'asdf'
        },
        {
          id: 3,
          name: 'b'
        },
        {
          id: 4,
          name: 'ac'
        },
        {
          id: 5,
          name: 'd'
        },
        {
          id: 6,
          name: 'ef'
        },
        {
          id: 7,
          name: 'ag'
        },
      ],
      timer:5000
    }
  },
  methods: {
    init() {
      for (let i = 0; i < 5000; i++) {
        this.exams.push({
          id: Math.random() * 10000,
          name:`${i}aa`
        });
      }
    }
  },
  created() {
    console.log(this.exams);
    
    var self = this;
    function action(){
    	self.exams.push({
          id: Math.random() * 10000,
          name:`aa`
        });
        self.timer--;
        if(self.timer>0){
        	window.setTimeout(action,10);
        }
        console.log(self.timer)
    }
    
   	action()
  }
})